Question

我想在单击与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中发布的指定菜单做到这一点。

Answer 1

您可以指定只有在'gprc'ul元素内的锚元素时才能使用它：

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

Answer 2

尝试将选择器设置为仅在菜单的div中锚定标记。

e.g：

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

Answer 3

你可以这样做：

$(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类仅添加到top内的正确链接， ID 为$('#top a')在页面上的所有链接上实现它。

单击与Jquery的菜单链接时，在菜单选项卡链接上激活或添加活动类

3 个答案: