jqueryaddclasstoggleclass

jQuery: Remove class if other element is clicked

I have an ul-list that contains li-elements. When the user clicks on one of these li elements a class should be added to that element.

This is easy to setup, however, when the other li-element is clicked I want the "active"-class to be removed from the non-active li.

I have made a jsfiddle of the problem: http://jsfiddle.net/tGW3D/

There should be one li-element that is red at any one time. If you click the second and then the first, only the first should be red.

Solution

  • This will remove the active class from each li that have active and than will add to the Element which was clicked.

    $('body').on('click', 'li', function() {
      $('li.active').removeClass('active');
      $(this).addClass('active');
});