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

Webページ全体に対してそれを行うだけですが、HTMLで投稿した特定のメニューに対してのみ行うにはどうすればよいでしょうか。

4

3 に答える 3

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

ページ上のすべてのリンクにクラスを実装するのではなく、適切なセレクターを使用して、 ID asを持つactive適切なリンクのみにクラスを追加します。divtop$('#top a')

于 2013-10-28T14:57:57.407 に答える