JSFiddle - React, Tailwind, and code Playground

by Vipin Patil

HTML

<div class="menu">

    <ul>
    <li><a href="~/link1/">LINK 1</a>
    <li><a href="~/link2/">LINK 2</a>
    <li><a href="~/link3/">LINK 3</a>
    </ul>

</div>

CSS

.active { color: red; }

JavaScript

$(function(){

    var url =  window.location.pathname ,  
        urlRegExp = new RegExp(url.replace(/\/$/,''));  
    
        // now grab every link from the navigation
        $('.menu a').each(function(){
            // and test its href against the url pathname regexp
            if(urlRegExp.test(this.href)){
                $(this).addClass('active');
            }
        });

});