1

我正在使用 jQuery 的 addClass 将类添加到选项卡，因此单击它会更改类，因此很明显选项卡已突出显示。

我的 HTML

<div id="mainNav">
            <ul>
                <li id="LinktheBand" onclick="nav('theBand')">The Band</li>
                <li id="linkTheMusic" onclick="nav('theMusic')">The Music</li>

我的 CSS

#mainNav li {
    float:left;
    margin-right:5px;
    color:white;
    font-family:Tahoma;
    font-weight:bold;
    padding: 10px 8px 0px 8px;
    background:url('../images/transparent-65.png');
    height:40px;
    height: 25px !important;
    border:1px solid #000;
}

#mainNav li:hover {
    float:left;
    margin-right:5px;
    color:white;
    font-family:Tahoma;
    font-weight:bold;
    padding: 10px 8px 0px 8px;
    background: #660000;
    height:40px;
    height: 25px !important;
    border:1px solid #660000;
}

.mainNavSelected {
    float:left;
    margin-right:5px;
    color:white;
    font-family:Tahoma;
    font-weight:bold;
    padding: 10px 8px 0px 8px;
    background: #660000;
    height:40px;
    height: 25px !important;
    border:1px solid #660000;
}

我的 Javascript

function nav(a) {
$('#'+a).show();
$('#Link'+a).addClass('mainNavSelected');
}

这工作正常，我检查了萤火虫，可以看到添加了 class="mainNavSelected"，但列表元素不采用新类的任何属性。Firebug 列出了 mainNavSelected 的所有类项，但它们都被划掉了。我缺少什么来替换这个元素的类？

4

4 回答 4

2

我认为这与 CSS 级联有关。id 上的样式将覆盖类上的样式，即使它们是在之后声明的。尝试放入ul li a.mainNavSelectedCSS，它应该可以工作。

另请注意，两个链接之间的 id 大小写不一致。

于 2010-06-14T19:00:37.240 回答
1

Firebug 向您展示了每个 CSS 属性的来源。如果它来自多个地方，则将无效的地方划掉。

我怀疑“#mainNav li”只是比类名具有更大的特异性。尝试将类的选择器更改为“#mainNav li.mainNavSelected”

于 2010-06-14T18:59:40.863 回答
1

我相信 ID 指定的属性优先于类指定的属性，因此您应该将 ID 指定的属性更改为类，然后将其删除并添加新类。

于 2010-06-14T19:00:14.843 回答
1 
.mainNavSelected { 
    float:left; 
    margin-right:5px; 
    color:white; 
    font-family:Tahoma; 
    font-weight:bold; 
    padding: 10px 8px 0px 8px; 
    background: #660000 !important;
    height:40px; 
    height: 25px !important; 
    border:1px solid #660000 !important; 
}

这应该可以纠正问题。你会看到你的 CSS 选择器#mainNav li比.mainNavSelected. 正因为如此#mainNav li才会永远展现出它之前的风采.mainNavSelected.

于 2010-06-14T19:10:38.787 回答