2

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

为此,我尝试说,如果显示某个 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");

}

谢谢,

韦德

4

3 回答 3

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

他们应该工作相同。就这样。

于 2010-03-28T21:32:52.880 回答
1

您的if语句只执行一次。当您切换页面时,这些if语句不会再次运行,因此不会发生任何变化。

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


顺便说一句,您可以通过一次css调用设置多个属性,如下所示:

$("#services #print-button").css({
    background: "#444444",
    color: "#999999"
});
于 2010-03-28T20:14:48.357 回答
0

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

    }

}
于 2010-03-28T21:21:50.910 回答