jQuery-UI选项卡-更改活动选项卡的颜色

Question

For the tab the user clicks on an is active, I like to change the tab color. I have the styling below. Is there another styling that I may be missing?

I have the following code

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

It still shows in blue color whereas I have need it in green.

Answer 1

Your green color is overridden by CSS specificity. If you want to update the active tab color you need to apply the color to active under tab class

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

or you can use !important as well.

See the running code here