3

これにはいくつかの 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 の投稿では、これが機能することが示されていましたが、これまでのところ成功していません。私はワードプレスできれいなパーマリンクを使用しているので、任意のページへのフルパスは次のようになります:

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 の部分です...何か助けはありますか?

4

2 に答える 2

5

試してみてください

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

        ...
    });

それ以外の

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

href次の行で探している属性は、this.hrefリスト項目ではなくリンクに適用されるため

次に、要素にクラスactiveを適用する必要がある場合は、使用するだけです<li>

 $(this).parent().addClass('active'); 
 // or  $(this).closest('li').addClass('active');
 // or pure-JS : this.parentNode.className += 'active';
于 2012-09-19T14:54:45.103 に答える
2

this.href は間違っています ($(this) である必要があります。さらに、li ではなくリスト要素をチェックしています。これを試してください:

$('#main-menu li > a').each(function(){
        if(urlRegExp.test($(this).attr('href'))){
            $(this).addClass('active');
        }
    });
于 2012-09-19T14:57:00.423 に答える