使用 Jquery 单击菜单链接时，在菜单选项卡链接上激活或添加活动类答案

【问题标题】：Activate or add class active on menu tab link when clicking the menu link with Jquery使用 Jquery 单击菜单链接时，在菜单选项卡链接上激活或添加活动类
【发布时间】：2013-10-28 22:57:57
【问题描述】：

单击带有 Jquery 的菜单链接时，我想在菜单选项卡链接上激活或添加活动类，并且：我有 HTML

<div id="top" class="shadow">
<ul class="gprc"> 
<li><a href="http://www.domain.com/">Home</a></li> 
<li><a href="http://www.domain.com/link1/">Text1</a></li> 
<li><a href="http://www.domain.com/link2/">Text2</a></li> 
<li><a href="http://www.domain.com/link3/">Text3</a></li> 
<li><a href="http://www.domain.com/link4">Text4</a></li> 
</ul> 
</div>

我找到了以下脚本来执行此操作。 jQuery

$( document).ready(function (){
  $( function(){
   var url = window.location.pathname,
   urlRegExp = new RegExp(url.replace( /\/$/,'' ) + "$" );
   $('a').each( function(){
   if(urlRegExp.test(this .href.replace(/\/$/, ''))){
    $( this).addClass('active' );
  }
 });   
});
});

只是它对整个网页都这样做，我怎么能只对我在 HTML 中发布的指定菜单这样做。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

你可以这样做：

$(function () {
    var url = window.location.pathname,
        urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
    $('#top a').each(function () {
        if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
            $(this).addClass('active');
        }
    });    
});

将active 类添加到div 内的正确链接，ID 为top，使用正确的选择器$('#top a')，而不是在所有链接上实现它页面。

【讨论】：

有一个问题，当我点击“主页”或链接1时，我得到了所有活动标签。
@Adrian 我遇到了同样的问题。我通过在两个地方都删除“.replace(/\/$/, '')”解决了这个问题。

【解决方案2】：

您可以指定仅当它是 'gprc' ul 元素中的锚元素时才起作用：

$('.gprc a').each( function(){
   if(urlRegExp.test(this .href.replace(/\/$/, ''))){
    $( this).addClass('active' );
  }
 });

【讨论】：

【解决方案3】：

尝试将选择器的范围限定为仅在菜单的 div 中锚定标签。

例如：

$( document).ready(function (){
  $( function(){
    var url = window.location.pathname, urlRegExp = new RegExp(url.replace( /\/$/,'' ) + "$" );
    $('#top a').each( function(){
      if(urlRegExp.test(this .href.replace(/\/$/, ''))){
        $( this).addClass('active' );
      }
    });   
  });
});

【讨论】：