Customizing jquery UI tabs

问题

I am using tab widget of jQuery UI. I want to change the color of active tab to yellow by using ui-tabs-active class as mentioned here in API docs

But despite of doing following:

<style type="text/css">
    .ui-tabs-active
    {
      background-color:yellow;
    }
</style>

Its color does not change. Here is the code at jsbin.com

回答1:

You need to be a little more direct with your CSS. Also you need to remove the default image that resides there

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
      background-image: none;
      background-color:green;
    }

DEMO http://jsbin.com/iXur/25/edit

回答2:

Try with:

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active
{
    background: green;
}

the jsbin.com

回答3:

change color on ui css file

open css file search about

.ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px;}

change

.ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px;  background-color:yellow;}

来源：https://stackoverflow.com/questions/18451846/customizing-jquery-ui-tabs