内部アンカーを持つアクティブなメニュー項目にクラスを追加します。

Question

内部アンカーで構成されるメニュー項目のリストを持つページがあります。選択した項目に.activeクラスを追加しようとしています。それは負荷で動作するようですが、同じページで新しいアイテムをクリックするとそうはなりません。

新しいメニュー項目をクリックすると、他のすべてのアクティブなクラスを削除し、このクラスをクリックしたアイテムに追加したいと思います。

かなりシンプルですが、私はそれを動作させることはできません。 私はこのFiddleを作成しましたが、URLにハッシュを追加できないため、問題は正しく表示されません。

しかし、誰かが私を正しい方向に向けることができます。

JS：

function setActiveLinks() { 
    var current = location.pathname; 
    $('.bs-docs-sidenav li a').each(function() { 
    var $this = $(this); 
    // Get hash value 
    var $hash = location.href.substr(location.href.indexOf('#') + 1); 
    if ($this.attr('href') == '#' + $hash) { 
     $this.parent().addClass('active'); 
    } 
    }) 
} 

setActiveLinks(); 

$('#leftmenu li a').click(function() { 
$('#leftmenu li').removeClass('active'); 
    setActiveLinks(); 
}); 

HTML：

<ul class="nav bs-docs-sidenav"> 
    <li> 
    <a href="#download">Download</a> 
    </li> 
    <li class="active"> 
    <a href="#whats-included">What's included</a> 
    <ul class="nav"> 
     <li class="active"><a href="#whats-included-precompiled">Precompiled</a></li> 
     <li><a href="#whats-included-source">Source code</a></li> 
    </ul> 
    </li> 
    <li> 
    <a href="#grunt">Compiling CSS and JavaScript</a> 
    <ul class="nav"> 
     <li><a href="#grunt-installing">Installing Grunt</a></li> 
     <li><a href="#grunt-commands">Available Grunt commands</a></li> 
     <li><a href="#grunt-troubleshooting">Troubleshooting</a></li> 
    </ul> 
    </li> 
</ul> 

感謝。 :-)

Answer 1

アンカー要素にクリックイベントをバインドするセレクタが間違っています。また、setActiveLinks()関数（hrefに基づいてクラスを設定する）を呼び出す必要はありません。

あなたは親李にトラバースし、その中でアクティブなクラスを追加するためにクリックしたアンカー要素のコンテキストを使用することができます。

var $navLIs = $('.nav li') 
$navLIs.find('a').click(function() { 
    $navLIs.removeClass('active'); 
    $(this).parent().addClass('active'); 
}); 

Working Demo