jquery - 事件页面上的 ListItem css 更改

Question

我已经尝试了几种方法来实现这一点，但似乎没有一种适合我。

我的页面顶部有一个相当简单的菜单，其中包含链接，默认情况下，字体粗细为正常，颜色为灰色，将鼠标悬停在它们上面会将它们变为粗体和白色。这工作正常，但我想要的是当前页面菜单项为粗体和白色。例如如果我在主页上，我希望主页链接为粗体和白色，而其他链接为灰色和正常，如果我转到“关于”页面，“关于”链接为粗体和白色，而其他链接为灰色和正常.

目前我有这个:

html:

<ul id="menuListItems" class="headerMenu"> 
        <li id="home"><a href="./Home.php">Home</a></li> 
        <li id="about"><a href="./About.php">About Me</a></li> 
        <li id="services"><a href="./Services.php">Services</a></li> 
        <li id="gallery"><a href="./Gallery.php">Gallery</a></li> 
        <li id="contact"><a href="./Contact.php">Contact Me</a></li>
</ul>

'headerMenu' 类只是设置列表的样式。

JQuery:

$(document).ready(function() {  
    $("#menuListItems li").each(function() {            
        if (document.URL.toUpperCase().indexOf($(this).attr('id').toUpperCase()) > -1) 
        {
            $(this).addClass("isSelected");
        }
    });
});

CSS:

.isSelected a { font-weight: bold; color:white;}

以上不起作用，现在奇怪的是，我什至无法手动设置 <li>类为“isSelected”，例如<li id="home" class="isSelected"><a href="./Home.php">Home</a></li> .这是我预期会起作用的东西，因此似乎没有为 <li> 正确设置类属性。 .

有人知道为什么这不起作用吗？或者实际上可以实现我需要的另一种方式？

非常感谢

编辑:

这是所需的剩余 CSS:

ul.headerMenu { 
    list-style:none; /* remove bullets */ 
    padding-left: 50px;
    width: 630px;
    top: 303px;
    position: absolute;
} 

ul.headerMenu li a { 
    padding:10px 20px; 
    text-decoration:none; 
    float:left; 
    font: 15px "Trebuchet MS", Verdana, Helvetica, sans-serif;
    font-weight: normal; 
    color: grey;
} 
ul.headerMenu li a:hover 
{ 
    color:white; 
    font-weight:bold;
}

我还对原始代码做了一些小改动，不使用 else block 来设置 isNotSelected 并将其添加到 ul.headerMenu li a 中

Answer 1

将此与添加类的 javascript 结合使用。

ul.headerMenu li.isSelected a { 
    font-weight: bold; 
    color: white;
}