javascript - 添加 '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';