JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<div class="navigation_part">
    <div id="top-nav">
        <ul>
            <li class=""><a href="index.php">Home</a>

            </li>
            <li class=""><a href="about.php">About&nbsp;Us</a>

            </li>
            <li class=""><a href="entrepreneurs.php">Entrepreneurs</a>

            </li>
            <li class=""><a href="investors.php">Investors</a>

            </li>
            <li class=""><a href="contactus.php">Contact&nbsp;Us</a>

            </li>
        </ul>
        <div class="nav_bar_underline"></div>
    </div>
</div>

CSS

.active
{
    color:green;
    
}
.current
{
    background:red;
}

JavaScript

$(document).ready(function () {

    $('.navigation_part li>a').click(function (e) {
        e.preventDefault(); // prevent the default action
        $('.navigation_part li').removeClass('current');
        $(this).parent().addClass('current');
        $('.navigation_part li a').removeClass('active');
        $(this).addClass('active');
    });
});