jquery - アクティブなメニューリンクにクラスを追加

Question

リンクが現在のURLに属している場合は、メニューからリンクの外観を変更する必要があります。現在のURLを検出して要素クラスを変更する方法がわかりません。

jQueryを使用します

ありがとう

Answer 1

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

Answer 2

あなたにできることは

1. URLの場所を取得します
2. .indexOf('.html')（またはあなたの拡張機能）を使用する
3. 次に、.substr(url.lastIndexOf('/'))（これによりページ名が表示されます）を使用します
4. 次に、classセレクターまたはidセレクターで使用します
5. activeページの読み込み時にそのリンクにクラスを起動します

これがどのように進むかを以下に示します。

これがあなたのURLだとしましょう：http://localhost/myWebsite/index.html

 $(function(){ // this is done on doc ready function

    var url = window.location;
    var dUrl = url.substr(0, url.indexOf('.html'));
    var link = dUrl.substr(dUrl.lastIndexOf('/')+1);

    $('#'+link).addClass('active'); // on page load this will add the class to the corresponding link

 });

このデモを試すことができます：http：//jsfiddle.net/K9YAz/

Answer 3

のプロパティを使用してwindow.location、現在のページのURLまたはURLの必要な部分を取得できます。次に、メニューのすべてのアンカーを選択し、それらをループして、それぞれのhref属性の値を現在のページのURLと比較します。それらが等しい場合は、適切なクラスを要素に追加します。