使用jQuery为当前菜单项添加“active”类

Question

使用jQuery为当前菜单项添加“active”类

3

对于这个问题，SO上已经有了几种解决方案，但是我尝试过它们并没有成功。JQuery初学者正在尝试解决方案，为简单的导航菜单添加一个“active”类以标识当前活动的列表项：

   <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部分真的很模糊...有什么帮助吗？

- NallyRoll

你正在尝试在一个<li>中查找href。 - Ricardo Binns

为什么不利用WordPress在<body>上设置的类别，就像我之前在SO上提供的答案一样，http://stackoverflow.com/a/12272075/600101？没有JS，只有WP和CSS的共生。这可以节省一些树木。 :) - Henrik Ammer

2个回答

2

this.href是错误的（应该是$(this)），而且你正在检查列表元素，而不是li。请尝试以下代码：

$(this).closest("li").addClass("active");

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

- Chris Dixon

this.href 不是错误的：它可以正常工作，而且比通过 $() 函数更高效。 - Fabrizio Calderan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fabrizio Calderan · Accepted Answer

尝试使用

    $('#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';