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”，但是list元素没有采用新类的任何属性。 Firebug列出了mainNavSelected的所有类项，但是它们全部被划掉了。我缺少什么来替换这个元素的类？

Answer 1

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

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

Answer 2

Firebug显示每个CSS属性的来源。如果它来自多个地方，那么那些没有效果的地方就会被划掉。

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

Answer 3

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

Answer 4

.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; 
}

这应该可以解决问题。您看到#mainNav li的CSS选择器比.mainNavSelected更具体。因此#mainNav li将始终在.mainNavSelected.

之前显示其样式

不使用addClass覆盖类

4 个答案: