swap classes on click

Question

I have a list of 6 items that are in a global div (navigationagence) Right now I am able to add a class on click but right now they adds up which means that once my six items are clicked they all end up with the currentagence class.

I want to be able to remove the add a class to the clicked item but remove it to the other, How can I achieve that? Here is the jquery code I am using right now.

$("#navigationagence ul li").click(function () { $(this).toggleClass("currentagence"); });

Answer 1

You can use the siblings() method to get the other list items and remove the class from them:

$("#navigationagence ul li").click(function() {
    $(this).addClass("currentagence").siblings().removeClass("currentagence");
});

Answer 2

Alternatively you can use:

$("#navigationagence ul li").click(function() {
    $(".currentagence").removeClass("currentagence");
    $(this).addClass("currentagence");
});