jQueryでアクティブなメニュー項目を設定する

Question

私がやっていることは、現在のアクティブなページが別のスタイルであるレギュラーメニューです。

HTML（正常に動作し）（正常に動作し）

<div> 
    <ul class="nav">  
     <li> 
      <a class="active" href="#"> 
       <span>one</span> 
      </a> 
     </li> 

     <li> 
      <a href="#"> 
       <span>two</span> 
      </a> 
     </li> 

     <li> 
      <a href="#"> 
       <span>three</span> 
      </a> 
     </li> 
    </ul>  
</div> 

CSS

.nav .active { 
    color: #fff; 
    background-color: #000; 
} 

JS（動作しない）Sara Soueidan's Codepenから取ら

$('a').click(function(){ 
    $(this).addClass('active') 
     .siblings() 
     .removeClass('active'); 
}); 

Codepen。

Sara Soueidanのバージョンは、codepenで複製することさえできません（aとliの両方を対象としています）。私が見つけたもう一つのバージョンは以下のJSを使用していました：

$('.nav li').click(function() { 
     $('.nav li').removeClass('active'); 
     $(this).addClass('active'); 
}); 

このバージョンでは動作しているように見えますが、私は私が3倍にする必要が理解していないいくつかの理由のために、両方のために、メニューボタンをクリックしてURLを使用しますアクティブなクラスを設定します。

誰もがこの恒常的な問題に少し光を当てることはできますか？

Answer 1

問題：あなたが最初aタグからactiveクラスを削除してから追加する必要があります。はこのラインで$(this).addClass('active').siblings().removeClass('active');

で実際aへのsiblingsがli

ソリューションの中にはありません〜$(this)

$('a.active').removeClass('active'); 
$(this).addClass('active'); 

Answer 2

私は認めるよりも時間がかかり、メニューボタンを押すときに「li」のアクティブなクラスを設定する必要はないことを発見しましたが、現在のURLにその部分が含まれているかどうかを確認する必要がありましたメニューの

したがって、私はJSでのif-elseifを迅速-N-汚れをチェーン：URLは文字列 "1" を含んでいる場合

$(document).ready(function() { 
    if(window.location.href.indexOf("one") > -1) { 
     $('.nav-container ul li').eq(1).addClass("active"); 
    } else if(window.location.href.indexOf("two") > -1) { 
     $('.nav-container ul li').eq(2).addClass("active"); 
    } else $('.nav-container ul li').eq(0).addClass("active"); 
}); 

をテストするために、私が使用：

window.location.href.indexOf("one") > -1 

その後特定の「li」をeq（i）でターゲットにしました。ここでは、0からn-1のメニュー項目です。

最高の解決策ではありませんが、5項目以下のメニューでは機能します。また、「1」メニュー項目に「one-one」、「one-two」などの子供がある場合はうまく機能します。