Question

我为三个标签写了一个代码点击给大家，它的内容将会出现。
但我有一个问题，就是我想为当前选项卡添加不同的背景，但我对它没有任何想法，我也不知道它的代码。
查看此演示以了解我创建的内容：DEMO
我怎么能这样：DEMO
,,,当我点击标签时，所选标签将有不同的背景（红色）。谢谢。
这里＆＃39;我的代码：

$(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：

.tab {
    margin - left: 2px;
}
.tab ul li {
    background: red;
    padding: 5px;
    color: #FFF;
    border - radius: 3px;
    float: left;
    list - style: none;
    margin - left: 2px;
}
.box1, .box2, .box3 {
    height: 190px;
    width: 244px;
    position: relative;
    top: 34px;
    left: 38px;
}
.box1 {
    background: green;
}
.box2 {
    background: blue;
}
.box3 {
    background: yellow;
}

HTML：

<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>

Answer 1

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

HTML（5）

<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>

的jQuery

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

CSS

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

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

<强> JSFiddle demo

Answer 2

fiddle

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

并添加此css

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

Updated fiddle

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

2 个答案:

HTML（5）

的jQuery

CSS