JSFiddle - React, Tailwind, and code Playground

by krish reddy

HTML

<ul class="main-navigation">
  <li><a href="javascript: void(0)" class="main-link">One</a></li>
  <li><a href="javascript: void(0)" class="main-link">Two</a></li>
  <li><a href="javascript: void(0)" class="main-link">Three</a></li>
  <li><a href="javascript: void(0)" class="main-link">four</a></li>
  <li><a href="javascript: void(0)" class="main-link">five</a></li>
  <li><a href="javascript: void(0)" class="main-link">six</a></li>
</ul>

JavaScript

document.querySelector('.main-navigation').addEventListener('click', (e) => { 
	// Remove active class
  let activeClass = document.querySelectorAll('.main-navigation li');
  for (var i = 0; i < activeclass.length; i++) {
        activeClass[i].classList.remove('active');
 	}
   
  
  // Add active class on element clicked
	if(event.target.classList.contains('main-link')){
  	event.target.classList.add('active');
  }
});