선택시 활성화 된 클래스 설정

Question

특정 목록을 선택할 때 class="active" 속성을 설정하고 싶습니다. 예를 들어, 특정 목록이 활성화 된 경우 다른 항목이 선택되면 활성 상태가되어야 &, 해당 목록이 활성화됩니다. 현재 jQuery 코드는 목록에서 항목을 선택할 때 모든 목록을 활성으로 설정합니다. 대신 그 항목이 선택된 활성 상태 여야합니다. jQuery 코드는 어떻게 수정합니까?

<ul class="nav nav-pills nav-stacked span5"> 
     <li class = "list"><a href="#" class="span3">abc</a></li> 
     <li class = "list"><a href="#" class="span3">def</a></li> 
     <li class = "list"><a href="#" class="span3">ghi</a></li> 
     <li class = "list"><a href="#" class="span3">jkl</a></li> 
</ul> 

jQuery를

$(document).ready(function() { 
    $(".span3").click(function() { 
    $('.list').attr("class","active");   // sets all the list item active. Instead I want only that particular element to be active. 

    }); 

}); 

Answer 1

사용 $(this).parent() 만 list 클릭 얻을, 그것은 addClass 대신 attr를 사용하는 것이 더 쉽습니다.

$(document).ready(function() { 
    $(".span3").click(function() { 
     $(this).parent().addClass("active"); 
    }); 
}); 

당신은 다른리스트의 모든뿐만 아니라 활성화되지하려면 :이 하나 클래스를 추가 할 수 있습니다

$(document).ready(function() { 
    $(".span3").click(function() { 
    $('.list').removeClass('active'); 
    $(this).parent().addClass("active"); 

    }); 

}); 

Answer 2

사용 addClass 방법 대신 ATTR :

$(document).ready(function() { 

    $(".span3").click(function() { 
     $(this).parent().addClass("active");  
    });  
}); 

및 rem 이 같은 비켜 클래스 :

$(document).ready(function() { 

    $(".span3").click(function() { 
     $('.list').removeClass("active");  
    });  
}); 

이의 jQuery API 문서 addClass() 및이를 참조 removeClass()

UPDATE :

그래, 난 JQuery와 더 많은 기능을 제공

Answer 3

$(document).ready(function() { 
    $(".span3").click(function() { 
     $('.list').removeClass("active"); 
     $(this).parent().addClass("active"); 
    }); 
}); 

Answer 4

부모()을 잊는다. 그 누구도 사용하고 있지 않습니다.

JQuery와 코드 :

$(document).ready(function() { 
    $(".nav>li").click(function() { 
     $(this).siblings('.active').toggleClass("active"); 
     $(this).toggleClass("active"); 
    }); 
}); 

링크 : http://jsfiddle.net/techsin/hJYfu/3/새 HTML 구조에

주의하십시오.