選択したアンカーにアクティブなクラスを追加する

Question

このjQueryコードを使用して、アンカー間でアクティブなクラスを切り替えることはできますが、悲しいことに、それが機能していないため、すべてのアンカーにアクティブなクラスを追加しています。

$(function() { 
    $('.categories-list li a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); 
}); 

と私のアンカーは以下のようになります。

<a href="/blog/category/motoring+advice+&amp;+tips" class="active">motoring advice &amp; tips</a> 
<a href="/blog/category/motoring+news+&amp;+updates" class="active">motoring news &amp; updates</a> 

私が達成しようとしているものではありませんそれらのアルに繰り返しアクティブクラスを。私はそれのように編集しようとしました：

$(function() { 
    $('.categories-list li a[href^="/blog/category/' + location.pathname.split("/")[1] + '"]').addClass('active'); 
}); 

まだ動作しませんでした。

.categories-list li 

これはちょうど私のulクラスであり、私のli

Answer 1

あなたのjQueryのセレクタ（x）は、xはのインデックスであり、すべてのアンカーにマッチし、IDを使用して、より正確なセレクタ、または.EQ使用必要なノード。

Answer 2

thatsどのように私はこの問題を解決します。

$(document).ready(function() { 
     addActiveClass(); 

     function addActiveClass() { 
      var current = window.location.pathname; 
      $('.categories-list-blog li a').each(function() { 
      var link = '' + $(this).attr('href'); 
      if (current == link) { 
       $(this).addClass('active'); 
      } 
      }); 
     } 
     });