Geek Answers Handbook

Only one active div allowed with jQuery

Say I have 3 divs each with an item class, and only one can have an active class at a time. For instance:

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

I have a jQuery binding code that fires a div in a 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 to do housekeeping when I remove an active class from any other div that might be active?

Thanks in advance.

+4
source share
10 answers

you need to use $(this).addClass , not just its own, you can also remove the active class from all elements with the active class in front of you - 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'); }); });
+10
source

As one insert, you can add an active class and then remove it from all siblings

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

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

+3
source

This can do it:

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

With this solution, you will search for items only once. Therefore, keep in mind that future .item elements .item not work as you expected, but it will be faster.

+2
source 
 $(this).siblings().removeClass('active');
+2
source

Working demo

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

Just remove it from all elements of the class before adding them to a new one:

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

This way, you don’t have to worry about tracking the previous active item, just delete everything and add to the selected one.

+1
source

Before adding an "active" class, you must delete the current "active" class.

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

I had a similar problem and wanted to leave this method. This retains the ability to remove the active class from other elements and still allows the switchable click element.

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

+1
source

Umm, I'm not very good at this, but what about removing the class and adding only one element, for example:

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

Firstly, I would recommend placing them in one container. Then you can remove the active class from all siblings (in case you need more than one group of elements on the whole 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

We also note that if you create something that is best represented using radio buttons, you can make the basic style of the element being checked only using HTML and CSS:

HTML + CSS example for forms

0
source

More articles:


All Articles