jQuery选项卡式接口CSS问题

我正在使用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>

下面是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

这：

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.a

一种解决方案是添加以下内容：

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

---

如果发现这一点使用。通过检查元素的css属性（您可以对页面上的每个元素执行此操作），很容易发现。正如您所看到的，firebug告诉您，元素的颜色属性如上所述被覆盖（它有一个删除线）：

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