JSFiddle - React, Tailwind, and code Playground

by grammar

HTML

<div class="menuWrapper">
     <ul id="navBar">
           <li class="highlight"><a href="aboutus.aspx"><span>ABOUT US</span></a></li>
           <li><a href="ourwork.aspx"><span>OUR WORK</span></a> </li>
           <li><a href='#'><span>CONTACT US</span></a></li>
     </ul>

</div>

CSS

.highlight
{
     color:orange;
}

.highlight a {
    color: orange;
}

JavaScript

var str = location.href.toLowerCase();
$("#navBar li a").each(function () {
     if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
           $("li.highlight").removeClass("highlight");
           $(this).parent().addClass("highlight");
     }
});

// I don't think this is necessary

/*$("li.highlight").parents().each(function () {
     if ($(this).is("li")) {
           $(this).addClass("highlight");
     }
});*/