Jquery addclass/removeclass on click

DEMO — Working example.

Corrected your markup:

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

Assuming you want the LI tags to have the active class.

<script>
$('.menu li').on('click', function(){
    $(this).addClass('active').siblings().removeClass('active');
});
</script>

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

Try this small lib, you can toggle class with native js? It will be like

var menu = document.querySelector('.menu');
menu.addEventListener('click', function () {
  Elemental.toggleClass(this, 'active');
})

it will add or removes class depending on its presence.

Related