Question

我已经尝试了几种方法来实现这一点，似乎没有一种方法可以帮助我。

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

目前我有这个：

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>正确设置class属性。

任何人都有任何想法为什么这不起作用？或者实际上是另一种可以实现我需要的方式？

非常感谢

编辑：

以下是剩余的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;
}

我还对orginial代码稍作修改，不使用else块设置isNotSelected，只是将其添加到ul.headerMenu li a

Answer 1

链接的样式可能会覆盖类应用的样式。试试这个

.isSelected a { font-weight: bold; color:white;}
#menuListItems  li a { font-weight: normal; color: grey;}

并且不需要IsNotSelected，因为这将是默认样式。

Answer 2

与您添加课程的javascript一起试用。

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

ListItem css在活动页面上更改

2 个答案: