Jquery addclass/removeclass on click

Question

I'm trying to add a class [active] when I click on a element in my menu. Then remove that class [active] when I click on a new item in the menu and add the [active] class to it.

I've tried $(this).removeClass("active").addClass("active");

$(this).toggleClass("active");

Basically i'm trying to make the hover() function but with the click even.

Edit: Fixed HTML

<ul class="menu">
    <li><span>Three</li>
    <li><span>Two</li>
    <li><span>One</li>
</ul>

Answer 1

Assuming only one active element at a time and without further knowledge of your DOM hierarchy.

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

More efficient options are available if the DOM hierarchy is known.

For example, if they're all siblings, you can use this:

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