1

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

这是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;
}

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

4

2 回答 2

8

Jquery 为选定的选项卡分配 class="ui-tabs-active" 以便对其进行样式设置，只需将您的 css 挂接到其中，如下所示：

#tabs .ui-tabs-active {
  background: yellow;
}
于 2013-05-28T02:33:05.100 回答
0

这对我有用：

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

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

于 2014-06-19T19:42:07.900 回答