JSFiddle - React, Tailwind, and code Playground

by seefeld

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 = "/link2/", // in real app this would have to be replaced with window.location.pathname 
        urlRegExp = new RegExp(url.replace(/\/$/,'')); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
    
        // 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');
            }
        });

});