0

当单击带有 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 中发布的指定菜单执行此操作。

4

3 回答 3

1

您可以指定您希望它仅在它是 'gprc' ul 元素内的锚元素时才起作用,如下所示:

$('.gprc a').each( function(){
   if(urlRegExp.test(this .href.replace(/\/$/, ''))){
    $( this).addClass('active' );
  }
 }); 
于 2013-10-28T14:56:39.720 回答
1

尝试将选择器的范围限定为仅在菜单的 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' );
      }
    });   
  });
});
于 2013-10-28T14:57:09.910 回答
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到内部IDdiv的正确链接,而不是在页面上的所有链接上实现它。top$('#top a')

于 2013-10-28T14:57:57.407 回答