JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<div class="menu">

    <ul>
        <li><a href="~/link1/">LINK 1</a>
        <li><a href="www.xyz.com/other/link1">LINK 2</a>
        <li><a href="~/link3/">LINK 3</a>
        <li><a href="/_display/">LINK 4</a>            
        <li><a href="/Vk8dV/show/">LINK 5</a>                
        <li><a href="/Vk8dV/2/show/">LINK 6</a>                
        <li><a href="/Vk8dV/3/show/">LINK 7</a>                
        <li><a href="/Vk8dV/4/show/">LINK 8</a>                
    </ul>

</div>

CSS

.active  { font-weight:bold; }

JavaScript

$(document).ready(function(){
    alert(window.location.pathname);
    $(".menu ul li a").each(function(){
        if($(this).attr("href")==window.location.pathname)
            $(this).addClass("active");
    })
})