3

对此有几个 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 部分......有帮助吗？

4

2 回答 2

5

尝试

    $('#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';
于 2012-09-19T14:54:45.103 回答
2

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

$('#main-menu li > a').each(function(){
        if(urlRegExp.test($(this).attr('href'))){
            $(this).addClass('active');
        }
    });
于 2012-09-19T14:57:00.423 回答