JSFiddle - React, Tailwind, and code Playground

by Khez

HTML

<div id="menu">
    <a href="/" class="active">Home</a>
    <a href="/awesome-link-1">Link 1</a>
    <a href="/awesome-link-2">Link 2</a>
    <a href="/about">About</a>
    <a href="/about">About</a>
    <a href="/contact-us">Contact Us</a>
</div>

CSS

.active{
    background:#999;
}

JavaScript

$(document).ready(function(){
    $("#menu a").click(function (event){
        event.preventDefault();// stop going go href
        // save the element
        $this=$(this);
        if($this.hasClass('active'))return;  // clicked an active tab
        // update the active tab
        $('#menu .active').removeClass('active');
        $this.addClass('active');
        return;
    });
});