自定义 jquery UI 选项卡答案

【问题标题】：Customizing jquery UI tabs自定义 jquery UI 选项卡
【发布时间】：2013-08-26 19:45:49
【问题描述】：

我正在使用 jQuery UI 的选项卡小部件。我想使用 API 文档中提到的 ui-tabs-active 类将活动选项卡的 color 更改为 yellow

但尽管做了以下事情：

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

它的颜色不会改变。这是jsbin.com 的代码

【问题讨论】：

标签： jquery css jquery-ui jquery-ui-tabs

【解决方案1】：

您需要更直接地处理 CSS。您还需要删除驻留在那里的默认图像

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

演示http://jsbin.com/iXur/25/edit

【讨论】：

【解决方案2】：

尝试：

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

jsbin.com

【讨论】：

【解决方案3】：

改变ui css文件的颜色

打开css文件搜索一下

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

改变

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

【讨论】：