TransWikia.com

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

Stack Overflow Asked by AskUmang on February 3, 2021

<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

javascript

3 Answers

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" );
});
<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>
 </ul>

Answered by Pablo Salazar on February 3, 2021

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.

Answered by Georgi B. Nikolov on February 3, 2021

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;
}
<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>
</ul>

Answered by Alex on February 3, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP