在活动jquery选项卡中使用不同的背景图像

我在页面代码中使用jquery选项卡，如下所示，我想在单击时将不同的背景图像添加到我的选项卡中：

<div id=\"tabs\">

<ul>
    <li><div id="tab1" class="active"><a href=\"#tabs-1\">blah</a></div></li>
    <li><div id="tab2"><a href=\"#tabs-2\">blahhhhhh</a></div></li>
    <li><div id="tab3"><a href=\"#tabs-3\">blaj blah blah</a></div></li>
    <li><div id="tab4"><a href=\"#tabs-4\">bal blah</a></div></li>
    <li><div id="tab5"><a href=\"#tabs-5\">blahhh blah</a></div></li>

    </ul>
</div>

单击选项卡菜单时，如何在每个选项卡（1,2,3,4,5）id上有不同的类？ 使用#选项卡上的单击功能，可以切换所有选项卡类。

试试看

$(function () {
    $("#tabs").tabs({
        activate: function (e, ui) {
            ui.oldTab.find('div').removeClass('active');
            ui.newTab.find('div').addClass('active');
        }
    });
});

然后

---

演示：

您可以向#tabs元素添加一个类：

$('#tabs li').click(function() {
     $('#tabs li').removeClass('active');
     $(this).addlass('active');

     // .index() will return 0, 1, 2, ....
     $('#tabs').addClass('class_'+ $(this).index());
}

在CSS中：

#tabs.class_1 { background: #FFFFFF; }
#tabs.class_2 { background: #AAAAAA; }
....

---

我理解得对吗。你不想每个标签都有自己的css样式吗

jsiddle上的示例：

你可以这样做

$(document).ready(function() {

    $("#tabs div").click(function(){
      $('#tabs div').removeClass('active');
      $(this).addClass('active'); //The div we clicked on
    });

});

然后使用css id为每个元素本身设置样式

#tab1{background-image:sample1.jpg}
#tab2{background-image:sample2.jpg}
#tab3{background-image:sample3.jpg}
#tab4{background-image:sample4.jpg}
#tab5{background-image:sample5.jpg}

演示

HTML

<div id="tabs">
    <ul>
        <li><div id="tab1" class="active"><a href="#tabs-1">blah</a></div></li>
        <li><div id="tab2" ><a href="#tabs-2">blahhhhhh</a></div></li>
        <li><div id="tab3" ><a href="#tabs-3">blaj blah blah</a></div></li>
        <li><div id="tab4" ><a href="#tabs-4">bal blah</a></div></li>
        <li><div id="tab5" ><a href="#tabs-5">blahhh blah</a></div></li>
    </ul>
</div>

Jquery

$(document).ready(function() {
 $("#tabs div").click(function(){
    $("#tabs div").removeClass("active");
    $(this).addClass("active");
 });
});

---

其中是回答与下面相同答案的背景样式库。我回答有点慢，因为我正在休息。

<div id="tabs">
    <ul>
        <li><div id="tab1" class="active"><a href="#tabs-1">blah</a></div></li>
        <li><div id="tab2" ><a href="#tabs-2">blahhhhhh</a></div></li>
        <li><div id="tab3" ><a href="#tabs-3">blaj blah blah</a></div></li>
        <li><div id="tab4" ><a href="#tabs-4">bal blah</a></div></li>
        <li><div id="tab5" ><a href="#tabs-5">blahhh blah</a></div></li>
    </ul>
</div>

#tab1.active{
    background-color: red;
}
#tab2.active{
    background-color: green;
}
#tab3.active{
    background-color: blue;
}
#tab4.active{
    background-color: yellow;
}
#tab5.active{
    background-color: grey;
}

$(document).ready(function() {
 $("#tabs div").click(function(){
    $("#tabs div").removeClass("active");
    $(this).addClass("active");
 });
});