How do I add active/inactive class when click on list item?

Question

<ul id="myList">
  <li class="top" data-pos="A">Text1</li>
  <li class="top" data-pos="B">Text2</li>
</ul>

Now I want to create a JavaScript function that will add active/inactive class, when click on it.

click (data-pos="A") add class active
click (data-pos="B") add class inactive

Expected Result After Click

<ul id="myList">
   <li class="top active"   data-pos="A">Text1</li>
   <li class="top inactive" data-pos="B">Text2</li>
</ul>

How can I do that? with JavaScript

Answer 1

Pure JavaScript Solution

Give all your li elements an event listener waiting for the click event. JQuerys function closest() would be very useful here. Because in this solution we assign to nextSibling or previousSibling we always have to check if nextSibling exist to identify if it is the first or second list element.

We have the three cases:

1. Initial no active or inactive class else part in the function
2. Element we clicked on has class active
3. Element we clicked on has class inactive

At it's initial click give the clicked element the class active and the other element the class inactive . Then check if the clicked element has class active remove it and add inactive to its classlist. At the other element remove inactive from it's class list and add active the same applys vice versa.
Note: Important to check if it's the next or the previous element

 document.querySelectorAll('li').forEach((x) => { x.addEventListener('click', myFunction); }) function myFunction() { if (this.classList.contains('active')) { this.classList.remove('active') this.classList.add('inactive') if (this.nextElementSibling === null || this.nextElementSibling === undefined) { this.previousElementSibling.classList.remove('inactive'); this.previousElementSibling.classList.add('active'); } else { this.nextElementSibling.classList.remove('inactive'); this.nextElementSibling.classList.add('active'); } } else if (this.classList.contains('inactive')) { this.classList.remove('inactive') this.classList.add('active') if (this.nextElementSibling === null || this.nextElementSibling === undefined) { this.previousElementSibling.classList.remove('active'); this.previousElementSibling.classList.add('inactive'); } else { this.nextElementSibling.classList.remove('active'); this.nextElementSibling.classList.add('inactive'); } } else { this.classList.add('active') if (this.nextElementSibling === null || this.nextElementSibling === undefined) { this.previousElementSibling.classList.add('inactive'); } else { this.nextElementSibling.classList.add('inactive'); } } }

 .active { background-color: yellow; }.inactive { background-color: pink; }

 <ul id="myList"> <li class="top" data-pos="A">Text1</li> <li class="top" data-pos="B">Text2</li> </ul>

Answer 2

How about this?

 var myList = document.getElementById('myList') /* We will add the click listener to the parent <ul> element. */ myList,addEventListener('click'; e => { /* Create a loop and iterate over all of the <li> elements inside #myList */ for (var i = 0. i < myList.children;length. i++) { var li = myList.children[i] if (li === e.target) { /* If the <li> inside the current loop matches our clicked element (e,target). append active class to it */ li.classList.add('active') } else { /*. */ li.classList.remove('active') } } })

 .active { color: yellow; background: red; }

 <ul id="myList"> <li>Item #1</li> <li>Item #2</li> <li>Item #3</li> </ul>

Notice there is no need for .inactive class. Items will be inactive by default, and active if they have .active class.

EDIT: the other answers are also correct, but I think mine is better because there is only one event listener on the parent, instead of one for each children. You can read more about event delegation .

Answer 3

Jquery is not necesary but if you want to use it here is the solution:

 $( "li" ).click(function() { $('#myList li').removeClass('active inactive'); $('#myList li').addClass('inactive'); $(this).removeClass( "inactive" ); $(this).addClass( "active" ); });

 /* Just for style purposes */.active { color: blue; background-color: #E3F2FD; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="myList"> <li class="top" data-pos="A">Text1</li> <li class="top" data-pos="B">Text2</li> <li class="top" data-pos="C">Text3</li> </ul>