부트 스트랩 목록 항목에 활성 클래스를 추가하고 다른 사용자로부터 활성 클래스를 제거하는 방법은 무엇입니까?

Question

나는 다음과 같은 HTML 코드가 있습니다

<a href="" ng-ctrl="ThemesCtrl" ng-click="checkThemeContent(theme)" ng-repeat="theme in themes" ng-hide="theme[filterProp] !== filterValue" class="list-group-item ng-scope"> 
    <b class="ng-binding">Test</b> 
    <span class="themesListIcons ng-binding"> 
     <i class="fa fa-check-square-o"></i> 0 
     <i class="fa fa-comment-o"></i> 2 
    </span> 
</a> 

을 그리고 난 후 항목을 선택한 항목에 활성 클래스를 추가 클릭하고 목록에서 다른 모든 항목에서 활성 클래스를 제거하고 싶습니다.

// Set active list item 
$('a.list-group-item').click(function() { 
    alert('test'); 
    $(this).parent().addClass('active').siblings().removeClass('active'); 
}); 

을하지만 그것은 작동하지 않습니다

나는이 방법으로이 작업을 수행하기 위해 노력했다.

누군가 올바른 방법으로 어떻게 할 수 있습니까?

AngularJS 또는 jQuery 사용.

// Set active list item 
$('a.list-group-item').click(function() { 
    alert('test'); 

    $(this).parent().parent().find('.active').removeClass('active'); 

    // or 

    $(this).closest('ul').find('.active').removeClass('active'); 

    $(this).parent().addClass('active'); 
}); 

당신은, 활성 요소를 찾아 '활성'클래스를 제거하고 오직 다음 새 항목을 추가해야합니다 :

Answer 1

이 방법을 사용해보십시오. 현재 새 요소에 활성 클래스를 설정하고 나중에 모든 요소를 ​​제거합니다.

편집 : 그냥 눈금이 표시된 태그 .. 확실히 ng-class 속성을 사용해야하며 가능한 경우 자신의 클릭 핸들러를 선언하지 마십시오.

<a ... ng-class="{active:theme == currentTheme}" ng-click="checkThemeContent(theme);currentTheme=theme" ..> 

Answer 2

이 너무 늦을 수도 있지만 다른 사람이 유용하게 찾을 수 있습니다. jQuery 코드에서 부모에게 "활성"클래스를 추가하고있다.

부트 스트랩과 jQuery를 사용하면 다음 코드를 사용해야합니다.

이

부트 스트랩 (사업부 구조) :

<div class="list-group"> 
    <a href="#" class="list-group-item"> 
     Item 1 
    </a> 
    <a href="#" class="list-group-item"> 
     Item 2 
    </a> 
</div> 

jQuery를 :

jQuery("a.list-group-item").click(function (e) { 
    jQuery(this).addClass('active').siblings().removeClass('active'); 
});