jQuery更改所选选项卡的颜色

Question

我已经使用jQuery创建了3个选项卡，我正在尝试更改所选选项卡的背景色。

我在jQuery中找到了许多关于突出显示活动选项卡的条目，并尝试遵循这些示例。但是我在实现示例时遇到了困难，所以我不确定我做错了什么。

下面是我的选项卡的代码：

<div id="informationTabs">
  <ul id="tabs">
    <li class="individual-tab" id="emailPhoneTab"><a href="#tabs-1" id="tab1Href">Email            &amp; Phone</a></li>
    <li class="individual-tab" id="mainAddressTab"><a href="#tabs-2" id="tab2Href">Main Address</a></li>
    <li class="individual-tab" id="mailingTab"><a href="#tabs-3" id="tab3Href">Mailing Address</a></li>
  </ul>
  <div id="tabs-1" class="tabs-windows">
    Change Email and Phone
  </div>
  <div id="tabs-2" class="tabs-windows">
    @Html.Action(Model.MainAddressPartialView)
  </div>
  <div id="tabs-3" class="tabs-windows">
    Mailing Address
  </div>
</div>

下面是我用来创建标签并在页面加载时设置活动标签的JQuery：

$("#informationTabs").tabs();
$(function() {
    $("#informationTabs").tabs({ selected: 1 });
});

这是一个css类，我试图使用它来设置所选标签的背景。它位于视图中呈现的一个单独的css类中。其他类工作得很好。

#tabs .ui-tabs-active {
    background: #5ba63c;
}

我是不是忘记了某个JQuery函数，或者忘记了应该用来设置所选选项卡背景颜色的设置？

提前谢谢。

Answer 1

感谢a1111exe、caeth和macsupport花时间将这篇文章放到JSFiddle上并进行检查。我查看了Macsupport推荐的JQuery插件，看起来我们使用的是jquery tabs1.8.24。当我检查该元素时，我注意到这个版本的jquery使用了.ui-state-active类。所以当我在css中改变它的时候，我得到了结果。如下所示：

#tabs .ui-state-active {
background: #5ba63c !important;
}

再次感谢你，肖恩

Answer 2

我不确定这是否正是您正在寻找的，但这个示例(至少在Firefox中)演示了一种在切换选项卡上更改css的方法(可能不是最好的)：

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="jquery-ui-1.11.2.custom/jquery-ui.css" />
<script src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.11.2.custom/jquery-ui.js"></script>
<script>
$(document).ready(function () {
        // Initialize active tab background color
        $("#informationTabs").tabs({
            create: function (e, i) {
                $('a.tab').css('background-color', 'white');
                i.tab.children('a').css('background-color', 'red');
            }
        });
        // Change the background color on activate
        $("#informationTabs").tabs({
            activate: function (e, i) {
                $('a.tab').css('background-color', 'white');
                var current = $('a[href="#' + i.newPanel.attr("id") + '"]');
                current.css('background-color', 'red');
            }
        });
});
</script>
</head>
<body>
<div id="informationTabs">
    <ul id="tabs">
        <li class="individual-tab" id="emailPhoneTab"><a href="#tabs-1" class="tab" id="tab1Href">Email            &amp; Phone</a></li>
        <li class="individual-tab" id="mainAddressTab"><a href="#tabs-2" class="tab" id="tab2Href">Main Address</a></li>
        <li class="individual-tab" id="mailingTab"><a href="#tabs-3" class="tab" id="tab3Href">Mailing Address</a></li>
    </ul>
    <div id="tabs-1" class="tabs-windows">
        Change Email and Phone
    </div>
    <div id="tabs-2" class="tabs-windows">
        @Html.Action(Model.MainAddressPartialView)
    </div>
    <div id="tabs-3" class="tabs-windows">
        Mailing Address
    </div>
</div>
</body>
</html>

希望这能有所帮助。

P.S. This似乎是一个关于jQuery UI标签的很好的教程。

另外，正如凯斯提到的那样，你的方式工作得很好(而且在所有方面都比我上面做的要好得多)。我已经把你的代码放在本地的html文件里了，如果是Firefox，它的颜色会变得非常漂亮：

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="jquery-ui-1.11.2.custom/jquery-ui.css" />
<style type="text/css">
#tabs .ui-tabs-active {
    background: #5ba63c;
}
</style>
<script src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.11.2.custom/jquery-ui.js"></script>
<script>
$("#informationTabs").tabs();
$(function() {
        $("#informationTabs").tabs({ selected: 1 });
});
</script>
</head>
<body>
<div id="informationTabs">
    <ul id="tabs">
        <li class="individual-tab" id="emailPhoneTab"><a href="#tabs-1" id="tab1Href">Email            &amp; Phone</a></li>
        <li class="individual-tab" id="mainAddressTab"><a href="#tabs-2" id="tab2Href">Main Address</a></li>
        <li class="individual-tab" id="mailingTab"><a href="#tabs-3" id="tab3Href">Mailing Address</a></li>
    </ul>
    <div id="tabs-1" class="tabs-windows">
        Change Email and Phone
    </div>
    <div id="tabs-2" class="tabs-windows">
        @Html.Action(Model.MainAddressPartialView)
    </div>
    <div id="tabs-3" class="tabs-windows">
        Mailing Address
    </div>
</div>
</body>
</html>