jQuery CSS интерфейс с вкладками проблема

Question

Я кодирую интерфейс с вкладками, используя jQuery, и хотя все работает, с точки зрения функциональности, существует проблема с CSS.Когда вкладка активна, ее цвет текста должен измениться на белый, но это не так, даже если он находится в CSS и изменяется только при наведении.Пожалуйста, посмотрите на этот код и скажите мне, что я делаю неправильно!

Вот HTML:

<div id="FooterTabsWrapper">

<ul class="Tabs">
    <li><a href="#Tab1">MOST POPULAR</a></li>
    <li><a href="#Tab2">MOST COMMENTS</a></li>
    <li><a href="#Tab3">HIGHEST RATED</a></li>

</ul>
<div class="TabWrapper">
    <div id="Tab1" class="TabContent">

    </div>

    <div id="Tab2" class="TabContent">

    </div>

    <div id="Tab3" class="TabContent">

    </div>
</div>

Вот CSS:

ul.Tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 40px;
width: 100%;
 }

ul.Tabs li {
float: left;
margin: 0;
padding: 0;
height: 40px;
line-height: 40px;
overflow: hidden;
width:100px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

ul.Tabs li a {
text-decoration: none;
color: #444;
display: block;
outline: none;
position: relative;
letter-spacing:-1px;
}

ul.Tabs li a:hover {
background-image:url(../Images/ActiveTab.jpg);
background-repeat:no-repeat;
color:#FFF;
} 

html ul.Tabs li.active, html ul.Tabs li.active a:hover  {
background-image:url(../Images/ActiveTab.jpg);
background-repeat:no-repeat;
color:#FFF;  /* This doesn't do anything! */
}

.TabWrapper {
border-top: none;
clear: both;
float: left; 
width: 100%;
background: #2D2D2D;
}

.TabContent {
padding: 20px;
height:185px;
overflow:auto;
}

А вотjQuery:

$(document).ready(function() {

//Default Action
$(".TabContent").hide(); //Hide all content
$("ul.Tabs li:first").addClass("active").show(); //Activate first tab
$(".TabContent:first").show(); //Show first tab content

//On Click Event
$("ul.Tabs li").click(function() {
$("ul.Tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".TabContent").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to   identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});

});

Спасибо,

DLiKS

Answer 1

Это:

ul.Tabs li a {
    /* ... */
    color: #444;
    /* ... */
}

Не перезаписывается этим:

html ul.Tabs li.active, html ul.Tabs li.active a:hover  {
    /* ... */
    color:#FFF;  /* This doesn't do anything! */
}

Поэтому элементы a остаются такими, как определено ul.Tabs li a

Одним из решений было бы добавить это:

ul.Tabs li.active a {
    color: #FFF;
}

<ч /> Если узнал это, используя Firebug . Изучив свойства css элемента (вы можете сделать это с каждым элементом на странице), это было легко обнаружить. Как вы можете видеть, firebug сообщает, что атрибут цвета элемента a перезаписан, как описано выше (он имеет зачеркнутый текст):

firebug http://i26.tinypic.com/2vmf137.jpg