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选项卡1.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选项卡的一个很好的教程。

P.P.S。正如caeth所提到的，你的方式运作得很好（并且比我上面所做的更好）。我把你的代码放在本地的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>

jQuery更改所选选项卡的颜色

2 个答案: