Only one active div allowed using jQuery

Question

Let's say I have 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.

Answer 1

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