javascript - CSS Toggable 选项卡随 Javascript 动态变化

Question

我正在尝试使用 JavaScript 更改比率标签按钮的背景颜色，以便在用户单击特定按钮后动态更改它。

如果您查看下面的链接，一旦您单击蓝色或红色框，黄色条和文本就会发生变化，但我也希望 [type=radio]:checked ~ label 按钮发生变化。

http://jsfiddle.net/thepaddyman/XWjJm/

$("document").ready(function(){

        $(".red").click(function(){
        $(".content").css("border-top-color","red");   
        $(".content").css("color","red"); }); }); 



        $("document").ready(function(){
        $(".blue").click(function(){
        $(".content").css("border-top-color","blue");     
        $(".content").css("color","blue"); 

}); });

太感谢了

帕特里克

Answer 1

这是工作演示

您不需要$(document).ready()像 hjpotter92 建议的那样嵌套

$(document).ready(function(){
    $(".red,#tab-1").click(function () {
        $(".content").css("border-top-color", "red");
        $(".content").css("color", "red");
    });
    $(".blue,#tab-2").click(function () {
        $(".content").css("border-top-color", "blue");
        $(".content").css("color", "blue");
    });
});