JSFiddle - React, Tailwind, and code Playground

by harifrais

HTML

<div id="test">
  <div><div><a href="1">Item 1</a></div></div>
  <div><div><a href="2">Item 2</a></div></div>
  <div><div><a href="3">Item 3</a></div></div>
  <div><div><a href="4">Item 4</a></div></div>
</div>

CSS

li.active a {
  color: red;
}

JavaScript

const parDiv = document.querySelectorAll('#test');

parDiv.addEventListener('click', e => {
  e.preventDefault();
  let divs = e.target.closest('div');
  if (divs) {
    divs.querySelectorAll('div').forEach(elm => elm.classList.remove('active'));
    divs.classList.add('active');
  }
});