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';

Answer 2

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

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

使用/ JQuery添加“active”类当前菜单项

2 个答案: