Вкладка Jquery-UI — изменение цвета активной вкладки

Для вкладки, которую пользователь нажимает, активна, мне нравится менять цвет вкладки. У меня есть стиль ниже. Есть ли другой стиль, который я могу пропустить?

У меня есть следующий код

// 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>

// Джаваскрипт

  <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>

Он по-прежнему отображается синим цветом, тогда как мне он нужен зеленым.

введите здесь описание изображения


person Nate Pet    schedule 18.06.2018    source источник
comment
вы вообще не применяете свой активный стиль. почему вы ожидаете, что он будет зеленым?   -  person Claire    schedule 18.06.2018
comment
@A Tom - разве он не применяется автоматически в зависимости от того, какая вкладка активна / выбрана?   -  person Nate Pet    schedule 18.06.2018
comment
@NatePet - вы проверили мой ответ ниже?   -  person PRAH    schedule 18.06.2018
comment
он должен добавляться автоматически, только если вы включаете 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   -  person Muhammad Omer Aslam    schedule 18.06.2018


Ответы (1)


Ваш зеленый цвет перекрывается специфичностью CSS. Если вы хотите обновить активный цвет вкладки, вам нужно применить цвет к активному в классе вкладок.

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

или вы также можете использовать !important.

См. рабочий код здесь

person PRAH    schedule 18.06.2018