How to add and remove class from list items?

Question

I have designed a side nav for a website. How can I add a class on click of a nav item and remove it from the previous nav item?

I have tried this solution right here: https://codepen.io/8eni/pen/MaGVrq

I have also tried a bit of jQuery.

Here is my code:

<ul class="side_menu" id="sideMenu">
  <li class="list_header">
    <p class="list_p">REVIEWS</p>
    <ul class="sub_list">
      <li class="sub_list_item" style="padding-top: 0px !important;">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
          <i class="fas fa-layer-group padding_right"></i> All Reviews
        </a>
      </li>
      <li class="sub_list_item">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
          <i class="fas fa-thumbs-up padding_right"></i> Best Albums
        </a>
      </li>
      <li class="sub_list_item">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
          <i class="fas fa-thumbs-down padding_right"></i> Worst Albums
        </a>
      </li>
    </ul>
  </li>
  <li class="list_header">
    <p class="list_p">GENRES</p>
    <ul class="sub_list">
      <li class="sub_list_item">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
          <i class="fas fa-music padding_right"></i> Dub
        </a>
      </li>
      <li class="sub_list_item">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
          <i class="fas fa-music padding_right"></i> Electronica
        </a>
      </li>
      <li class="sub_list_item">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
          <i class="fas fa-music padding_right"></i> Grundge
        </a>
      </li>
    </ul>
  </li>
</ul>

I want a class to be added to the particular item clicked by a user. Once another item is clicked, the previous item gets the class removed.

Answer 1

Using jQuery:

$(document).ready(function(){
    $('.sub_list_item').click(function(){
        $('.sub_list_item').removeClass('yourClass');
        $(this).addClass('yourClass');
    });
});

Hope this works! The idea is to remove yourClass from all nav items and then add it to only the current one.

Answer 2

Here's a pure JavaScript way to do it (no dependencies). I prevented the default link behaviors for the sake of the demo.

 const listItems = document.querySelectorAll('.sub_list_item'); function setActiveClass() { if (document.querySelector('.sub_list_item.active') != null) { document.querySelector('.sub_list_item.active').classList.remove('active'); } this.classList.add('active'); } listItems.forEach(item => { item.addEventListener('click', setActiveClass); }); // DEMO ONLY — REMOVE const listLinks = document.querySelectorAll('.sub_list_link'); listLinks.forEach(link => { link.addEventListener('click', e => e.preventDefault()); }); 

 .sub_list_item.active { background-color: yellow; } 

 <ul class="side_menu" id="sideMenu"> <li class="list_header"> <p class="list_p">REVIEWS</p> <ul class="sub_list"> <li class="sub_list_item" style="padding-top: 0px !important;"> <a href="https://www.facebook.com" target="_blank" class="sub_list_link"> <i class="fas fa-layer-group padding_right"></i> All Reviews </a> </li> <li class="sub_list_item"> <a href="https://www.facebook.com" target="_blank" class="sub_list_link"> <i class="fas fa-thumbs-up padding_right"></i> Best Albums </a> </li> <li class="sub_list_item"> <a href="https://www.facebook.com" target="_blank" class="sub_list_link"> <i class="fas fa-thumbs-down padding_right"></i> Worst Albums </a> </li> </ul> </li> <li class="list_header"> <p class="list_p">GENRES</p> <ul class="sub_list"> <li class="sub_list_item"> <a href="https://www.facebook.com" target="_blank" class="sub_list_link"> <i class="fas fa-music padding_right"></i> Dub </a> </li> <li class="sub_list_item"> <a href="https://www.facebook.com" target="_blank" class="sub_list_link"> <i class="fas fa-music padding_right"></i> Electronica </a> </li> <li class="sub_list_item"> <a href="https://www.facebook.com" target="_blank" class="sub_list_link"> <i class="fas fa-music padding_right"></i> Grundge </a> </li> </ul> </li> </ul> 

jsFiddle