使用 JQuery 添加“活动”类当前菜单项答案

【问题标题】：Adding 'active' class current menu item w/ JQuery使用 JQuery 添加“活动”类当前菜单项
【发布时间】：2012-09-19 23:07:03
【问题描述】：

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

【问题讨论】：

您正试图在<li> 中找到href。
为什么不使用 Wordpress 在 <body> 上设置的课程中提供的功能，就像我之前在 SO 上所做的回答 stackoverflow.com/a/12272075/600101 一样？ symbios 中没有 JS，只有 WP 和 CSS。拯救世界一些树木。 :)

标签： javascript jquery html css

【解决方案1】：

试试

    $('#main-menu li a').each(function(){
        if(urlRegExp.test(this.href)){

        ...
    });

而不是

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

因为您在下一行使用this.href 查找的href 属性应用于链接，而不是列表项

那么，如果您需要在 <li> 元素上应用 active 类，只需使用

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

【讨论】：

所以也许将类添加到parent()？
"$(this).attr('href')" 比 "this.href" 好，不是吗？
不，效率较低，因为您是 1) 调用 jQuery 函数 2) 调用方法 attr()
我明白了，谢谢...这意味着 this.href 仅使用 JS 而没有 JQuery...过多使用 JQuery 有时会杀死 JS 效率... :o)
我同意您不妨使用this.href，但使用jQuery 来获取它真的不会成为性能杀手。有些人喜欢在所有可能的情况下都使用 jQuery，因为他们已经在很多代码中使用它，所以这取决于他们。另外，我认为 href 足够安全，但是 jQuery 在尝试 node.href 时会处理跨浏览器问题，在不支持使用 .something 或任何奇怪问题的情况下。

【解决方案2】：

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

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

【讨论】：

this.href 没有错：它可以正常工作，而且比通过 $() 函数更高效