Only one active div allowed using jQuery

Let's say I hav开发者_开发百科e 3 divs each with class item and only one can have class active at a time. For example:

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

I have a jQuery binding code that activates a div on the click event:

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

What is the best way of doing the housekeeping where I would remove the active class from any other div that may be active?

Thanks in advance.

---

you need to use $(this).addClass, not just on it's own, also, you can remove active class from all elements with active class before hand - like this:

$(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');
    });
});

---

As a one liner, you can add the active class, then remove it from all the siblings

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

See demo here: http://jsfiddle.net/nAnpn/1/

---

This could do it:

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

With this solution you'll lookup for the items only once. So keep in mind that future .item elements won't work as you expected, but it'll be faster.

---

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

---

Working Demo

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

---

Just remove it from all divs of class item before you add it to the new one:

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

That way you don't have to worry about keeping track of the previous active element, just remove from all and add to the selected one.

---

Before adding "active" class, you should remove the current "active" class.

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

---

I had a similar issue and wanted to leave this method. This retains the ability to remove the active class from other elements and still allows the clicked element to toggle, need be.

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

​

---

Uhm, I'm not very good in this but what about removing the class and only adding item back in again like:

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

---

First off, I'd recommend putting them all in one container. Then you can remove the active class from all of the siblings (in case you want more than one group of items throughout the page).

$(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

Note also that if you're designing something best represented with radio buttons, you can do basic styling of the checked element with just HTML and CSS:

HTML+CSS example for forms