JSFiddle - React, Tailwind, and code Playground
HTML
<div class="submenu">
<ul>
<li><a class="menuLink active" href="/home">Home</a></li>
<li><a class="menuLink" href="/freq">FAQ</a></li>
<li><a class="menuLink" href="/contactus">Contact Us</a></li>
</ul>
</div>
CSS
.active{
color: orange
}
.submenu ul li{
list-style: none;
display: inline;
font-size: 20px;
padding-right: 20px;
}
.submenu ul li a{
text-decoration: none;
}
JavaScript
function getLastURL(){
var pathname = window.location.pathname;
var pathArray = pathname.split('/');
pathArray = pathArray[pathArray.length - 1];
pathArray = pathArray.split('.');
return pathArray[0].toLowerCase();
}
function selectedLink(){
var url = getLastURL();
var elements = $(".menuLink");
$(".menuLink").removeClass("active");
if(url== "home")
elements[0].classList.add("active");
if(url=="freq")
elements[1].classList.add("active");
if(url== "contactus")
elements[2].classList.add("active");
}
window.onload=selectedLink();