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

所限定3210

一个解决办法是，以补充一点：

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

---

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

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