Jquery如果可见条件不起作用

我这里有一个使用jQuery的页面： 我想做的是，如果幻灯片或子页面显示在那里，更改背景颜色和按钮的颜色

为此，我试着说，如果显示某个div，则某个按钮的背景颜色会改变。但是，您可以看到它工作不正常，它正在更改web的颜色，但没有删除颜色更改，并在更改页面时在不同的按钮上添加颜色更改

以下是总体代码：

/* 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");

}

谢谢

---

如果语句只执行一次，则韦德您的

。切换页面时，
if
语句不会再次运行，因此不会发生任何更改

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


顺便说一下，您可以通过一个
css
调用设置多个属性，如下所示：

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

谢谢SLaks，你的建议奏效了，但出于某种原因，它不会让我重置css悬停。当div的按钮返回到非活动状态时，它将不会静止悬停

/*隐藏除web以外的所有页面*/

$("#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"});

    }

}

很抱歉，这有点不相关，但通过简化代码，您可以节省很多：

您的版本：

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" });
    } 

更简单的版本：

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" });
    } 

它们应该是一样的。仅此而已。
在更新的页面中，您忘记设置品牌链接的文本颜色。另外，您应该使用
else
而不是
：hidden
。谢谢，在返回悬停时遇到问题，请在下面发布代码。谢谢，我已经更改了这个，这肯定更好。不幸的是，悬停仍然无法正常工作。jQuery不支持
：hover
选择器。您需要调用jQuery的
hover
函数或使用CSS和
addClass
。如何编写这两个函数？抱歉，jquery还是新手。