突出显示当前页面链接随着子菜单使用JavaScript

我想强调当前页面链接，像这样...... Image Here 突出显示当前页面链接随着子菜单使用JavaScript

多亏了别人在我面前谁问这个，我已经能够做到这一点正常。

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

我试图强调子菜单的父母，只要我在它。但是，无论何时我从父菜单（例如“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，所以如果你们中的任何人都可以帮助我...我真的很感激它...在此先感谢。

来源

2015-12-06 Ernest Mercado

Java有什么，他们完全地不同的语言和环境的JavaScript做... – Vi100

对此深感抱歉人。 –

尝试使用列表中的每个列表项删除活动类和它的子列表，然后添加积极的类到你想要的物品，否则你将不得不控制太多的情况。

这是代码：

$('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 demostrating：http://codepen.io/anon/pen/jWORRG

来源

2015-12-06 17:11:58 Vi100

非常感谢。效果很好。 –

你正在移除活动类的方式是错误的，因为addClass不会返回一个jQuery对象，所以你不能使用它的兄弟（）。

我也觉得是更好地使用父母的，而不是最近的地方，你应该尝试这样的事：

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

来源

2015-12-06 16:55:31

也试过这个，对我很好，下次我会记住你的提示。 :-D –

突出显示当前页面链接随着子菜单使用JavaScript

回答

相关问题