jQueryを使用して1つのアクティブなdivのみが許可されている

Question

私は3つのdivをそれぞれクラスitemで持ち、1つしかクラスactiveを持つことはできません。たとえば：

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

私は、クリックイベントにdiv要素を活性化させるjQueryの結合コードを持っている：

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

私はいずれかからアクティブなクラスを削除するでしょう家事を行うための最善の方法は何ですかアクティブな他のdivですか？

ありがとうございます。

Answer 1

- このように：

$(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要素は期待どおりに動作しませんが、速くなることに注意してください。

あなたも、あなたが手の前に activeクラスを持つすべての要素から activeクラスを削除することができますだけでなく、それ自身で、 $(this).addClassを使用する必要が

Answer 4

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

Answer 5

ただ、すべてからそれを削除あなたが新しいものに追加する前に、クラスの項目のdivタグ：

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

あなたは、以前のアクティブ素子を追跡に関する柱を心配する必要はありません道すべて削除して、選択したものに追加します。

Answer 6

オムが、私はこれで非常に良いではないんだが、何クラスを削除するだけのように再び内の項目を追加する方法について：

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

Answer 7

まず第一に、私は1つの容器でそれらのすべてを置くことをお勧めしたいです。次に、すべての兄弟から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

1つのライナーとして、あなたはアクティブなクラスを追加することができ、その後、デモここを参照してくださいすべての兄弟から

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

それを削除します。http://jsfiddle.net/nAnpn/1/

Answer 10

を私は同様の問題があったとしたかったですこのメソッドを終了します。これにより、アクティブなクラスを他の要素から削除する機能が保持され、クリックされた要素がトグルする必要があります。

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