我的代码由Jquery创建标签:
<script src="http://localhost:81/joomlandk/js/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="<?php echo $this->baseurl;?>/css/jquery-ui.css">
<div id="dtabs" class="tabContaier" >
<ul >
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1" >
<ul class="nav">
<li><a href="#">Test link</a></li>
<ul class="itemcon">
<li>Test under</li>
</ul>
</ul>
</div>
<div id="tabs-2">
tab 2
</div>
<div id="tabs-3" >
tab 3
</div>
</div>
我的CSS:
.ui-tabs {
position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
padding: .2em;
padding-top: 150px;
}
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
list-style: none;
float: left;
position: relative;
top: 0;
margin: 1px .2em 0 0;
border-bottom-width: 0;
padding: 0;
white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
float: left;
padding: .5em 1em;
text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: -1px;
padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
cursor: text;
}
.ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
/*background: none;*/
}
结果:
我尝试添加更多:但不起作用。
.ui-tabs-selected ul li a{
color: red;
background: #ccc222;
}
我希望在CSS选择标签时更改标签标题的文字颜色。 你能帮助我吗?我很穷css。:))
答案 0 :(得分:6)
你需要这条规则:
.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
color: #0000ff;
}
答案 1 :(得分:0)
看起来你正在使用jQuery-UI标签。
只需放入您的css文件:
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
color: orange; /* specefy your color */
}