JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<nav id="buttons">
  <button aria-selected="false">button 1</button>
  <button aria-selected="false">button 2</button>
  <button aria-selected="false">button 3</button>
</nav>

CSS

button[aria-selected="true"] {
  border: 3px solid green;
}

JavaScript

let nav = document.querySelector('#buttons');
let buttons = document.querySelectorAll('#buttons button');

nav.addEventListener('click', function (e) {   
  let selected = document.querySelector('[aria-selected="true"]');
    
  if (selected) {
    selected.setAttribute('aria-selected', 'false');
  }
  
  e.target.setAttribute('aria-selected', 'true');
  
  console.log(e.target.innerText);
});