jQuery를 사용하여 활성 div 하나만 허용됨

Question

각 div가 3 개 div이고 각각 ​​item이고 한 번에 하나씩 만 active 클래스를 가질 수 있다고 가정 해 보겠습니다. 예를 들어 내가 어떤에서 활성 클래스를 제거 할 것 하우스 키핑을하는 가장 좋은 방법은 무엇

$(document).ready(function() { 
    $('.item').bind('click', function() { 
     addClass('active');   
     // now I need to remove active class from the previous selected item 
    }); 
}); 

:

<div class="item active">1</div> 
<div class="item">2</div> 
<div class="item">3</div> 

내가 클릭 이벤트에 사업부를 활성화시키는 jQuery를 바인딩 코드를 다른 div가 활성 상태 일 수 있습니까?

미리 감사드립니다.

Answer 1

당신이 아니라 그 자체에 $(this).addClass를 사용할 필요도, 당신은 손 전 active 클래스의 모든 요소에서 active 클래스를 제거 할 수 있습니다 -이 같은 :

$(document).ready(function() { 
    $('.item').bind('click', function() { 
     // remove the active class from all elements with active class 
     $('.active').removeClass('active') 
     // add active class to clicked element 
     $(this).addClass('active'); 
    }); 
}); 

Answer 2

Working Demo

$(document).ready(function() { 
     $('.item').bind('click', function() { 
      $('.item').removeClass('active').filter($(this)).addClass('active'); 
     }); 
    }); 

Answer 3

이 그것을 할 수 :

$(document).ready(function() { 
    var $items = $('.item'); 
    $items.bind('click', function() { 
     $items.removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 

를 한 번만 항목에 대해 조회거야이 솔루션. 따라서 미래의 .item 요소는 예상대로 작동하지 않지만 더 빠를 것입니다.

Answer 4

$(this).siblings().removeClass('active'); 

Answer 5

을 그냥 모두에서 제거 클래스 항목의 div의 당신은 새로운 하나를 추가하기 전에 :

$('.item').removeClass('active'); 
$(this).addClass('active'); 

이전 활성 요소, 광주 추적하는 데 대해 걱정하지 않아도 그런 식으로 st에서 모두 제거하고 선택한 것에 추가하십시오.

Answer 6

음, 나는 클래스를 제거하고 단지처럼 다시에 항목을 추가하는 방법에 대한 정말이 좋은하지만 아니에요 :

$('div').removeClass('item active').addClass('item'); 

Answer 7

첫째, 나는 하나 개의 컨테이너에 모두 넣어 권하고 싶습니다. 그런 다음 모든 형제에서 active 클래스를 제거 할 수 있습니다 (페이지 전체에 하나 이상의 항목 그룹이 필요한 경우).

HTML+CSS example for forms

Answer 8

: 가장 라디오 버튼으로 표현 뭔가를 설계하는 경우, 당신은 단지 HTML로 확인 된 요소의 기본 스타일을 할 수 있고 CSS 것이

$(function() { 
    $(".item").click(function() { 
    var $this = $(this);       // store jQuery object 
    $this.siblings(".item").removeClass("active"); // remove from all .items 
    $this.addClass("active");      // add to clicked item 
    }); 
}); 

jsFiddle example

주

"활성"클래스를 추가하기 전에 현재 "활성"클래스를 제거해야합니다.

$(document).ready(function() { 
    $('.item').bind('click', function() { 
     addClass('active');   
     $('.item').removeClass('active'); 
    }); 
}); 

Answer 9

한 라이너로서, 활성 클래스를 추가 할 수 있습니다, 다음 데모 여기를 참조하십시오 모든 형제 자매에서

$(this).addClass('active').siblings().removeClass('active') 

을 제거 : http://jsfiddle.net/nAnpn/1/

Answer 10

을 나는 비슷한 문제를 가지고하고 싶었 이 메소드를 종료하십시오. 이것은 다른 요소에서 활성 클래스를 제거 할 수있는 기능을 유지하면서 클릭 된 요소가 전환 할 수 있도록 허용합니다.

$(".item").click(function(){ 
    $('.active').not(this).removeClass('active'); 
    $(this).toggleClass('active');  
});