0

わかりました、私はこれに対する解決策を探しましたが、これまでのところ、私が達成する必要があることに関連するものを見つけることができません.

私が必要とするのは、ロジックに関する限り非常に単純です。

次のようなナビゲーション バーがあります。

<nav>
    <ul>
       <li><a href="download.shtml">Download</a></li>
       <li><a href="documentation.shtml">Documentation</a></li>
       <li><a href="contact.shtml">Contact</a></li>
       <li><a href="about.shtml">About</a></li>
    </ul>
</nav>

また、サイトの URL は単純です。

http://domain.net/download.shtml
http://domain.net/documentation.shtml
http://domain.net/contact.shtml
http://domain.net/about.shtml

質問：

.active現在のページ/URL を検出し、対応するナビゲーション項目にクラスを追加するにはどうすればよいですか?

たとえば、ダウンロードページにいる場合、最終結果は次のようになります。

<nav>
    <ul>
       <li><a href="download.shtml" class="active">Download</a></li>
       <li><a href="documentation.shtml">Documentation</a></li>
       <li><a href="contact.shtml">Contact</a></li>
       <li><a href="about.shtml">About</a></li>
    </ul>
</nav>

この件についてご協力いただきありがとうございます。

4

2 に答える 2

3

アンカーhrefindexOfをチェックすることでこれを試すことができますlocation.href 

$(function(){
    $.each($("nav a"), function(){
       var self = $(this);
       if(location.href.indexOf(self.prop('href'))>-1){
           self.addClass('active');
           //self.parent().siblings().find('a').removeClass('active');
       }
    });

});
于 2012-10-23T03:51:15.053 に答える
1

URL が単純な場合は、window.location.pathname を使用できます。例えば：

$(function(){
  $('nav a').each(function(){
    if( $(this).attr('href') === window.location.pathname.substring(1) ){
      $(this).addClass('active');
    }
  });
});

作業例: http://jsbin.com/akevin/1/edit

于 2012-10-23T03:57:30.857 に答える