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

Question

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

   <div id="main-menu">

      <ul>
         <li><a href="/site/about">About Us</a></li>
         <li><a href="/site/work">Our Work</a></li>
         <li><a href="/site/contact">Contact Us</a></li>    
      </ul>

    </div>

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

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

到目前为止,这是我的工作:

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

我已经尝试了几种解决方案,包括改变我写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在<li>元素上应用类只是使用

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