Javascript 如何为当前选项卡设置不同的背景？

我写了一个代码为三个标签t点击每个人，它的内容将出现。
但我有一个问题，那就是我想把不同的背景，目前选项卡是选定的，但我没有任何想法，我不知道它的代码。
查看此演示，了解我创建的内容：
我怎么能有这样的东西：
，，当我单击to tab时，所选选项卡将具有不同的背景（红色）。 谢谢
这里是我的代码：

$(document).ready(function () {
    $(".tab ul li:nth-child(1)").click(function () {
        $(".box1").fadeIn();
        $(".box2").hide();
        $(".box3").hide();
    });
});
$(document).ready(function () {
    $(".tab ul li:nth-child(2)").click(function () {
        $(".box2").fadeIn();
        $(".box1").hide();
        $(".box3").hide();
    });
});
$(document).ready(function () {
    $(".tab ul li:nth-child(3)").click(function () {
        $(".box3").fadeIn();
        $(".box1").hide();
        $(".box2").hide();
    });
});

Css:

HTML:

测试表1
测试表2
测试表3

然后添加这个css

.tab ul li:nth-child(1) {
    background: blue;
}

---

看来您是在以程序思维进行编码：涵盖所有基础、可能的结果和潜力（这是一种非常线性的模式）。当然，它仍然有效，但因此您的代码变得非常冗长，因此更难阅读和维护

HTML（5） CSS

---

thnks:），如果我想成为默认的蓝色，我的意思是你给我的这段代码，我必须单击一个选项卡成为蓝色，我想成为默认的蓝色。顺便说一下，你只需要

$（document）.ready（function（）{…}

一次。事实上，如果你把这个脚本放在

标记之前，你就不需要

.ready（）

完全可以。这是一个很好的建议，请您更新您的代码。如果有三个不同的框，内容不同。我将保留与问题相关的答案。不过，我已经为您提供了一个基本逻辑。

<div class="tab">
<ul>
    <li>Test Tab 1</li>
    <li>Test Tab 2</li>
    <li>Test Tab 3</li>
</ul>
</div>
<div class="box1"></div>
<div class="box2" style="display:none"></div>
<div class="box3" style="display:none"></div>

   $(document).ready(function(){
        $(".tab ul li:nth-child(1)").click(function(){
          $(".box1").fadeIn();
          $(".box2").hide();
          $(".box3").hide();
          $(".tab ul li").css("background", "red")
          $(this).css("background", "blue")
        });
        $(".tab ul li:nth-child(2)").click(function(){
          $(".box2").fadeIn();
          $(".box1").hide();
          $(".box3").hide();
          $(".tab ul li").css("background", "red")
          $(this).css("background", "blue")
        });
        $(".tab ul li:nth-child(3)").click(function(){
          $(".box3").fadeIn();
          $(".box1").hide();
          $(".box2").hide();
          $(".tab ul li").css("background", "red")
          $(this).css("background", "blue")
        });
    });

.tab ul li:nth-child(1) {
    background: blue;
}

<div class="tab">
    <ul>
        <li data-color="green">Test Tab 1</li>
        <li data-color="blue">Test Tab 2</li>
        <li data-color="yellow">Test Tab 3</li>
    </ul>
</div>

<div class="box" data-color="green"></div>

$(document).ready(function(){
    $(".tab ul li").click(function(){       
        $(".tab ul li").removeClass("active")
        $(this).addClass("active");
        $('.box').css("background", $(this).data('color'));
    });
});

.tab ul li.active{
    background: purple; 
}

.box{
    height: 190px;
    width: 244px;
    position: relative;
    top: 34px;
    left: 38px;
    background: green;
}