javascript - 使用 Javascript 突出显示带有子菜单的当前页面链接

Question

我正在尝试突出显示当前页面链接，就像这样... Image Here

感谢在我之前提出此问题的其他人，我能够正确地这样做。

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

每当我在其中时，我都试图突出显示子菜单的父级。但是，每当我从父菜单(例如“MAIN”)转到子菜单时从不同的父菜单(例如“TRANSFEREES”)发生这种情况...... Image Here

这是菜单的 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 的新手，所以如果你们中的任何人能帮助我...我将不胜感激...提前致谢。

Answer 1

您删除事件类的方式是错误的，因为 addClass 不返回 jQuery 对象，因此您不能在其上使用 siblings()。

我也认为使用 parents 而不是 closest 更好，你应该尝试这样的事情:

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