CODEWITHSUNDEEP
css
mum
mum

Reputation: 1645

How change text color of Tab Selected by CSS?

This my code create tab by 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>

My 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;*/
}

Result:

enter image description here

i try add more: but not work.

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

I want to change text color of tab title when tab selected by CSS. Can you help me? i am very poor css.:)

Upvotes: 0

Views: 21228

Answers (2)

Minister
Minister

Reputation: 1238

You'll need this rule:

.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
    color: #0000ff;
}

Upvotes: 6

Andrew Rumm
Andrew Rumm

Reputation: 1278

It looks like u are using jQuery-UI tabs.

Just place in your css file:

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
   color: orange; /* specefy your color */
}

Upvotes: 0

Related Questions