Question

我已经学会了如何创建一个jquery ui选项卡，感谢http://jqueryui.com/tabs，并自定义了它的外观。我一直在网上搜索如何通过在有人点击它时更改它的背景颜色来突出显示所选标签。到目前为止，它一直很沮丧，也没有成功。

以下是 HTML代码使用：

<!DOCTYPE html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" >

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>

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

<title>Jquery Tab Test</title>
</head>

<body>

<div id="tab-wrapper">
<div id="tabs">

<ul>
    <li><a href="#tabs1">Tab 1</a></li>
    <li><a href="#tabs2">Tab 2</a></li>
    <li><a href="#tabs3">Tab 3</a></li>
</ul>

<br class="clearboth" />

<div id="tabs1" class="tab-content">
Content 1
</div>

<div id="tabs2" class="tab-content">
Content 2
</div>

<div id="tabs3" class="tab-content tabs3">
Content 3
</div>

</div>
</div>

</body>

和 CSS ：

body, html {
    height: 101%;
}

body {
    font-family: arial;
}

.clearboth {
    clear: both;
    padding: 0;
    margin: 0;
}
#tab-wrapper {
    background-color: #f00fff;
    border: solid 1px #909090;
    padding: 5px;
    width: 330px;
}

#tabs {
    overflow: hidden;
}

#tabs ul li,
#tabs ul { 
    margin: 0;
    padding: 0;
    list-style: none;
}

#tabs ul a {
    float: left;
    padding: 5px;
    display: block;
    width: 100px;
    text-align: center;
    text-decoration: none;
    color: #000000;
    height: 20px;
    line-height: 20px;
    font-size: 10pt;
    font-weight: bold;
    background-color: #cccccc;
}

#tabs ul a:hover {
    background-color: #f1f1f1;
}

#tabs .tab-content {
    padding: 5px;
    display: block;
    background-color: #f1f1f1;
    font-size: 10pt;
    height: 300px;
    border-top: solid 1px #000000;
}

如果有人可以，请提供帮助。

Answer 1

Jquery为选中的选项卡分配class =“ui-tabs-active”，所以要设置样式，只需将你的css挂钩，如下所示：

#tabs .ui-tabs-active {
  background: yellow;
}

Answer 2

这对我有用：

#tabs .ui-tabs-active {
  background: yellow;
}

但上面的答案没有 - css文件中的顺序很重要 - 上面的内容是在悬停之后。

如何突出显示所选的jquery ui tab？

2 个答案: