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