jquery如果可见条件不工作

Question

我有一个页面去这里使用jQuery：http://treethink.com/services 我想要做的是，如果幻灯片或子页面显示在那里，更改背景颜色和按钮的颜色。

为此，我试过说，如果显示某个div，某个按钮的背景颜色会发生变化。但是，您可以在那里看到它无法正常工作，它会更改网页的颜色，但不会在更改页面时删除颜色更改并在不同的按钮上添加颜色更改。

这里是整个代码：

/* Hide all pages except for web */ 

$("#services #web-block").show(); 
$("#services #print-block").hide(); 
$("#services #branding-block").hide(); 

/* When a button is clicked, show that page and hide others */ 

$("#services #web-button").click(function() { 

    $("#services #web-block").show(); 
    $("#services #print-block").hide(); 
    $("#services #branding-block").hide(); 

}); 

$("#services #print-button").click(function() { 

    $("#services #print-block").show(); 
    $("#services #web-block").hide(); 
    $("#services #branding-block").hide(); 

}); 

$("#services #branding-button").click(function() { 

    $("#services #branding-block").show(); 
    $("#services #web-block").hide(); 
    $("#services #print-block").hide(); 

}); 

/* If buttons are active, disable hovering */ 

if ($('#services #web-block').is(":visible")) { 

    $("#services #web-button").css("background", "#444444"); 
    $("#services #web-button").css("color", "#999999"); 

} 

if ($('#services #print-block').is(":visible")) { 

    $("#services #print-button").css("background", "#444444"); 
    $("#services #print-button").css("color", "#999999"); 

} 

if ($('#services #branding-block').is(":visible")) { 

    $("#services #branding-button").css("background", "#444444"); 
    $("#services #branding-button").css("color", "#999999"); 

} 

感谢，

韦德

Answer 1

你if语句只执行一次。当您切换页面时，if语句不会再次运行，因此没有任何更改。

您需要将if语句放入函数中，然后在切换页面之后立即调用该函数。

---

顺便说一句，你可以用一个css电话设置多个属性，就像这样：

$("#services #print-button").css({ 
    background: "#444444", 
    color: "#999999" 
}); 

Answer 2

感谢SLaks，你的建议的工作，但由于某种原因，它不会让我重新设置CSS悬停。当div的按钮回到不活动状态时，它不会悬停。

/*隐藏所有的页面，除了网络*/

$("#services #web-block").show(); 
$("#services #print-block").hide(); 
$("#services #branding-block").hide(); 
activeButton(); 

/* When a button is clicked, show that page and hide others */ 

$("#services #web-button").click(function() { 

    $("#services #web-block").show(); 
    $("#services #print-block").hide(); 
    $("#services #branding-block").hide(); 
    activeButton(); 

}); 

$("#services #print-button").click(function() { 

    $("#services #print-block").show(); 
    $("#services #web-block").hide(); 
    $("#services #branding-block").hide(); 
    activeButton(); 

}); 

$("#services #branding-button").click(function() { 

    $("#services #branding-block").show(); 
    $("#services #web-block").hide(); 
    $("#services #print-block").hide(); 
    activeButton(); 

}); 

/* If buttons are active, disable hovering */ 

function activeButton() { 

    if ($('#services #web-block').is(":visible")) { 

     $("#services #web-button").css({background: "#444444", color: "#999999"}); 


    } else if ($('#services #web-block').is(":hidden")) { 

     $("#services #web-button").css({background: "#000000", color: "#999999"}); 
     $("#services #web-button:hover").css({background: "#666666", color: "#ffffff"}); 

    } 

    if ($('#services #print-block').is(":visible")) { 

     $("#services #print-button").css({background: "#444444", color: "#999999"}); 

    } else if ($('#services #print-block').is(":hidden")) { 

     $("#services #print-button").css({background: "#000000", color: "#999999"}); 
     $("#services #print-button:hover").css({background: "#666666", color: "#ffffff"}); 

    } 

    if ($('#services #branding-block').is(":visible")) { 

     $("#services #branding-button").css({background: "#444444", color: "#999999"}); 

    } else if ($('#services #branding-block').is(":hidden")) { 

     $("#services #branding-button").css({background: "#000000", color: "#999999"}); 
     $("#services #branding-button:hover").css({background: "#666666", color: "#ffffff"}); 

    } 

} 

Answer 3

对不起，这是稍微无关，但你可以通过简化您的代码，节省了大量的：

您的版本：

if ($('#services #web-block').is(":visible")) { 

     $("#services #web-button").css("background", "#444444"); 
     $("#services #web-button").css("color", "#999999"); 

    } else if ($('#services #web-block').is(":hidden")) { 

     $("#services #web-button").css("background", "#000000"); 
     $("#services #web-button").css("color", "#999999"); 
     $("#services #web-button:hover").css("background", "#666666"); 
     $("#services #web-button:hover").css("color", "#ffffff"); 

    } 

简化版本：

if ($('#services #web-block').is(":visible")) { 
     $("#services #web-button").css({"background":"#444444"), "color":"#999999"}); 
    } else { 
     $("#services #web-button").css({ "background":"#000000", "color":"#999999" }); 
     $("#services #web-button:hover").css({ "background":"#666666", "color":"#ffffff" }); 
    } 

他们应该工作一样。就这样。