jQueryの「アクティブ」クラス割り当て

Question

私が達成しようとしているすべての1がクリックされたリンクの順序なしリストを持ってできるようにすることです、親リストの項目は、「アクティブな。」クラスが割り当てられています別のリンクがそのリスト内をクリックしたら、それは「アクティブ」が割り当てられている場合、そのリスト項目からそれを削除し、最新のクリックされたリンクの親リスト項目に追加します。

どうかチェック

例：

ステップ1 - ユーザーは、リンク「私はリンク2だが、」クリックした

<ul>
<li><a href="#">I am link one</a></li>
<li class="active"><a href="#">I am link two</a></li>
</ul>

ステップ2 - ユーザーは「私はリンク一人です」リンクをクリックし、今している。

<ul>
<li class="active"><a href="#">I am link one</a></li>
<li><a href="#">I am link two</a></li>
</ul>

かなりシンプルですが、男私は私を殴るます。

Answer 1

仮定：UL要素クラスを持っている 'linksList'

。

$('.linksList li a').click(function()
{
  $('.linksList li').removeClass('active');
  $(this).parent().addClass('active');
});

Answer 2

次のようなものは、

それを行うべき

$(function() {
    $('li a').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        $this.closest('ul').children('li').removeClass('active');
        $this.parent().addClass('active');
    });
});

の ワーキングデモのの

Answer 3

この質問は今少し古いですが、私は改善のためのスペースがまだあると思います。

"伝統" は地元のイベントバインディングます：

$("ul a").click(function(){
    $(this).parent("li").addClass("active")
        .siblings().removeClass("active");

    # return false to cancel the default action (e.g. follow the link):
    return false;
});

さて、デリゲート経由同じ使用して、イベントの委任（）（jQueryの+1.4.2）。あなたが動的にイベントを再バインドすることなく、余分> LI> Aを追加できます：

$("ul").delegate("a", "click", function(){
    $(this).parent("li").addClass("active")
        .siblings().removeClass("active");

    # return false to cancel the default action
    # and prevent it from bubbling (further) up:
    return false;
});

例えば、排他的目的のリスト（複数可）と一致するものを

変更「UL」、 ".linksList"、 "#nav" など。