Question

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

感谢我之前提出过这样问题的其他人，我已经能够做到这一点了。

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

每当我进入子菜单时，我都会尝试突出显示子菜单的父级。但是，每当我来自父菜单（例如＆＃34; MAIN＆＃34;）并从另一个父母（例如＆＃34; TRANSFEREES＆＃34;）转到子菜单时，就会发生这种情况...... {{ 3}}

这是菜单的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（）。

我也认为最好使用父母而不是最近，你应该尝试这样的事情：

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

Answer 2

尝试删除列表中每个列表项及其子列表的活动类，然后将活动类添加到所需的项目中，否则您将需要控制太多案例。

这是代码：

$('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

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

2 个答案: