jquery: remove previous class by clicking

Question

Hi All,

I've a very simple question but can't figure it out by myself. i've the following problem.

i've several list items like below.

<li></li>
            <li>
                <img src="images/persoon1.jpg" alt="persoon1">
                <div id="infoPersoon">
                    <h3>Jaap-Jan van der Gouw</h3>
                    <ul id="contactInfo">
                        <li class="label">T</li>
                        <li>070 31 31 066</li>
                        <li class="label">F</li>
                        <li>070 31 31 066</li>
                        <li class="label">M</li>
                        <li>070 31 31 066</li>
                    </ul>
                    <ul id="contactOpties">
                        <li class="email"><a href="#" class="active">Email</a></li>
                        <li class="publicaties"><a href="#">Publicaties</a></li>
                        <li class="vcard"><a href="#">Vcard</a></li>
                        <li class="meerinfo"><a href="#">Meer info</a></li>
                    </ul>
                </div>
            </li>
            <li></li>

the problem is that i want to add a class by the current list i clicked on, and when i clicked to the next list item, the previous class "active" must be remove.

how can i solve that problem.

Answer 1

The most common approach is to remove the active class from any tag that has it like:

$(".active").removeClass("active");

To put it all together would be:

$("li").click(function() {
    $(".active").removeClass("active");
    $(this).addClass("active");
});

Answer 2

You can add a click handler like this:

$("#contactOpties li a").click(function() {
  $(this).addClass('active')
         .parent().siblings().children().removeClass('active');
});

You can give it a try here. This adds the class only on click, but you could also toggle the .active class off if you clicked, do to that use .toggleClass() instead of .addClass().

---

Or just so you have options, you could have the click handler on the <li> or use .delegate() (useful for lots of elements, or dynamically changing ones), like this:

$("#contactOpties").delegate("li", "click", function() {
  $(this).children('a').addClass('active').end()
         .siblings().children().removeClass('active');
});

You can give that a try here.

Answer 3

$('#contactOpties').delegate('a', 'click', function(e){
   $(this)
   .addClass('active')
   .parent()
   .siblings()
   .children()
   .removeClass('active');
});