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元素的color属性（它有一个删除线）：

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

jQuery选项卡式界面CSS问题

1 个答案: