CSS Toggleable选项卡使用Javascript动态更改

Question

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

如果您查看下面的链接，一旦您点击蓝色或红色框，黄色条和文本会发生变化，但我也想要[type = radio]：checked~signal按钮进行更改。

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

这是有效的demo

您不需要将嵌套$(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");
    });
});