jQuery "Active"클래스 할당

Question

내가 달성하려는 것은 클릭 할 수없는 링크 목록을 클릭 할 수있는 것입니다. 부모 목록 항목에는 클래스 "active"가 할당됩니다. 해당 목록 내에서 다른 링크가 클릭되면 "Active"가 할당되었는지 확인하고 해당 목록 항목에서 제거하고 가장 최근의 클릭 링크 상위 목록 항목에 추가하십시오.

예시:

1 단계 - 사용자가 "I am inlink two"링크를 클릭했습니다.

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

2 단계 - 사용자는 이제 "I am inlink one"링크를 클릭했습니다.

<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;
});

이제 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"을 독점적으로 원하는 목록과 일치하는 모든 것으로 변경합니다.