jquery - 类不会被 addClass 覆盖

Question

我正在使用 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');
}

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

Answer 1

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

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