JSFiddle - React, Tailwind, and code Playground

by Rajavel D

HTML

<a id="mnu1" class="mnu hovered" src="#" onclick="makeSelected('mnu1')"> One </a>
<a id="mnu2" class="mnu" src="#" onclick="makeSelected('mnu2')"> Two </a>
<a id="mnu3" class="mnu" src="#" onclick="makeSelected('mnu3')"> Three </a>

CSS

.mnu{
    background-color : #451;
    margin-left:20px;
    font-size:30px;
}
 a:hover{
     background-color:#ccc;
 }
.hovered{
    background-color:#ccc;
}

JavaScript

var prev_mnuid= "mnu1";
function makeSelected(mnuid){
    document.getElementById(prev_mnuid).className = "mnu";
    document.getElementById(mnuid).className = "mnu hovered";
    prev_mnuid=mnuid;
}