添加’active’类当前菜单项w / JQuery

已经有几个SO解决方案，但我没有运气让他们工作。 JQuery初学者试图通过一个解决方案在一个简单的导航菜单中将一个“活动”类添加到活动列表项：

 
 
About Us
 
Our Work
 
Contact Us
 
  

之前的SOpost表明这有效，但到目前为止我没有成功。 我在wordpress中使用非常永久链接，因此任何页面的完整路径如下：

http://www.foobar.comhttps://stackoverflow.com/site/about/

到目前为止，这是我的工作：

  $(function(){ var url = window.location.pathname, urlRegExp = new RegExp(url.replace(/\/$/,'')); $('#main-menu li').each(function(){ if(urlRegExp.test(this.href)){ $(this).addClass('active'); } }); });​  

我已经尝试了几种解决方案，包括改变我编写href的方式等等。我真正模糊的代码部分是urlRegExp部分……有什么帮助吗？

Answer 1

试试吧

  $('#main-menu li a').each(function(){ if(urlRegExp.test(this.href)){ ... }); 

代替

  $('#main-menu li').each(function(){ if(urlRegExp.test(this.href)){ ... }); 

因为你正在查看下一行的href属性this.href应用于链接，而不是列表项

然后，如果您需要在

元素上应用active类，请使用

  $(this).parent().addClass('active'); // or $(this).closest('li').addClass('active'); // or pure-JS : this.parentNode.className += 'active'; 

Answer 2

this.href是错误的（应该是$（this），加上你正在检查列表元素，而不是li。试试这个：

 $('#main-menu li > a').each(function(){ if(urlRegExp.test($(this).attr('href'))){ $(this).addClass('active'); } });