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 类。它位于在 View 中呈现的单独的 css 类中。其他类工作正常。

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

我是否忘记了任何地方的 JQuery 函数或应该设置所选选项卡背景颜色的设置？

提前致谢。

Answer 1

感谢 a1111exe、caeth 和 macsupport 花时间将它放在 JSFiddle 上并检查它。我查看了 Macsupport 推荐的 JQuery 插件，看起来我们使用的是 jquery tabs 1.8.24。当我检查该元素时，我注意到这个版本的 jquery 正在使用类 .ui-state-active。所以当我在 css 中更改它时，我得到了结果。见下文:

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

再次感谢， 肖恩