6

私が達成しようとしているのは、リンクの順序付けられていないリストを作成できるようにすることです。リンクをクリックすると、親リスト項目に「アクティブ」クラスが割り当てられます。そのリスト内で別のリンクがクリックされると、「アクティブ」が割り当てられているかどうかがチェックされ、そのリストアイテムから削除され、最後にクリックされたリンクの親リストアイテムに追加されます。

例：

ステップ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-ユーザーは「私はリンク1です」というリンクをクリックしました

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

とてもシンプルですが、私は私を殴りました。

4

3 に答える 3

10

仮定：UL要素にはクラス'linksList'があります。

$('.linksList li a').click(function()
{
  $('.linksList li').removeClass('active');
  $(this).parent().addClass('active');
});
于 2009-08-11T21:11:25.997 に答える
7

次のようなものがそれを行う必要があります

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

作業デモ

于 2009-08-11T21:10:40.773 に答える
1

この質問はもう少し古いですが、まだ改善の余地があると思います。

「従来の」ローカルイベントバインディング：

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

ここで、delegate（）（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」など、目的のリストのみに一致するものに変更します。

于 2010-12-09T22:33:03.687 に答える