使用Javascript高亮显示带有子菜单的当前页面链接

Highlight Current Page Link With Submenus Using Javascript

本文关键字：菜单 当前页 链接 Javascript 高亮 显示 使用      更新时间：2023-09-26

我正在尝试突出显示当前页面链接，如下。。。此处的图像

感谢在我之前提出这个问题的其他人，我能够做到这一点。

但是，我的导航栏有一个子菜单。

每当我在子菜单中时，我都会尝试突出显示子菜单的父菜单。但是，每当我从父菜单（例如"MAIN"）转到另一个父菜单（如"TRANSFEREES"）时，就会发生这种情况。。。此处的图像

这是菜单的html。。。

<ul id = "nav">
<li><a href = "Index.html">MAIN</a></li>
<li><a href = "About.html">ABOUT US</a></li>
<li><a href = "Admission.html">ADMISSION</a>
    <ul class = "sub">
        <li><a href = "Freshmen.html">FRESHMEN</a></li>
        <li><a href = "Transfer.html">TRANSFEREES</a></li>
    </ul>
</li>   
</ul>

这是Javascript代码。。。

$('ul#nav li a').click(function(){
$(this).closest('ul#nav li').addClass('active').siblings().removeClass('active');       
return false;
});

还有CSS。。。

ul#nav li.active{
background:#9993a6;}

我试着到处寻找解决方案，我是Javascript的新手，所以如果你们中的任何人能帮助我……我真的很感激……提前谢谢。

删除活动类的方式是错误的，因为addClass不返回jQuery对象，所以不能对其使用siblings（）。

我还认为最好使用父母而不是最亲密的人，你应该尝试这样的方法：

$('ul#nav li a').click(function(){
    var listElement = $(this).parents('ul#nav li');
    listElement.addClass('active');
    listElement.siblings().removeClass('active');
    return false;
});

尝试为列表中的每个列表项及其子列表删除活动类，然后将活动类添加到所需的项中，否则您将不得不控制太多情况。

这是代码：

$('ul#nav li a').click(function(){
    $('#nav li').removeClass('active');
    $(this).addClass('active');
    var possibleParent = $(this).parents('#nav li');
    if (possibleParent) possibleParent.addClass('active');
});

这里有一个Codepen演示：http://codepen.io/anon/pen/jWORRG

相关文章：