JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div id="thenavigation">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>

CSS

.highlight {background-color: #F00; color: #FFF;}
.highlight a {color: #FFF;}
#thenavigation li {display: inline; padding: 0 10px;}
#thenavigation li a {text-decoration: none;}

JavaScript

$('#thenavigation li a').click(function() {
    $(this).closest("li").addClass('highlight').siblings().removeClass('highlight');
    return(false);   // no default behavior from clicking on the link
});