Jquery-UI 选项卡 - 更改活动选项卡颜色答案

【问题标题】：Jquery-UI Tab - Change Active Tab ColorJquery-UI 选项卡 - 更改活动选项卡颜色
【发布时间】：2018-06-18 20:18:37
【问题描述】：

对于用户点击的标签处于活动状态，我喜欢更改标签颜色。我有下面的样式。我可能会缺少另一种样式吗？

我有以下代码

// Styling of tabs 
<style>
    .ui-tabs-active {
        background-color: green;     
    }
</style>


    // tab details
    <div id="tabs">
     <ul>
      <li><a href="#tabs-1">Tab1</a></li>
      <li><a href="#tabs-2">Tab2</a></li>
      <li><a href="#tabs-3">Tab3</a></li>
     </ul>
     <div id="tabs-1">
      <p>Tab1 Content</p>
     </div>
     <div id="tabs-2">
      <p>Tab2 Content</p>
     </div>
    <div id="tabs-3">
      <p>Tab3 Content</p>
    </div>
   </div>

// Javascript

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 <script type="text/javascript">

     $(function () {
       $("#tabs").tabs();
  });
 </script>

它仍然显示为蓝色，而我需要它为绿色。

【问题讨论】：

你根本没有应用你的活跃风格。你为什么希望它是绿色的？
@A Tom - 它不会根据活动/选择的选项卡自动应用
@NatePet - 你检查了我下面的答案吗？
只有当您包含 https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css 时才会自动添加它，其中包含 .tabs-title>a:focus, .tabs-title>a[aria-selected=true] 这意味着您不需要 tabs-title 到 li

标签： jquery css jquery-ui-tabs

【解决方案1】：

您的绿色被 CSS 特异性覆盖。如果要更新活动选项卡颜色，则需要将颜色应用于选项卡类下的活动

.ui-tabs .ui-tabs-active {
    background-color: green;
}

或者你也可以使用 !important。

See the running code here

【讨论】：