JSFiddle - React, Tailwind, and code Playground

by jlss

HTML

<div class="nav">
    <ul class="navigation">
        <li class="selected"><a href="#">HOME</a></li>
        <li><a href="#">PROFILE></a></li>
        <li><a href="#">CONTACTUS</a></li>
        <li><a href="#">ABOATUS</a></li>
    </ul>
</div>

CSS

li.selected {
    background-color: #f90;
}

JavaScript

$('ul.navigation li a').click(

function(e) {
    e.preventDefault(); // prevent the default action
    e.stopPropagation; // stop the click from bubbling
    $(this).closest('ul').find('.selected').removeClass('selected');
    $(this).parent().addClass('selected');
});