如何更改CSS选中的Tab的文本颜色?

时间:2014-01-20 11:55:03

标签: css css3

我的代码由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;*/
}

结果:

enter image description here

我尝试添加更多:但不起作用。

.ui-tabs-selected ul li a{
color: red;
background: #ccc222;
}

我希望在CSS选择标签时更改标签标题的文字颜色。 你能帮助我吗?我很穷css。:))

2 个答案:

答案 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 */
}