JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav navbar-nav navbar-right">
    <li class="selected"><a href="index.php">Home</a>
    </li>
    <li><a href="about-us.php">About Us</a>
    </li>
    <li><a href="services.php">Services</a>
    </li>
    <li><a href="portfolio.php">Portfolio</a>
    </li>
    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="icon-angle-down"></i></a>

        <ul class="dropdown-menu">
            <li><a href="career.php">Career</a>
            </li>
            <li><a href="blog-item.php">Blog Single</a>
            </li>
            <li><a href="pricing.php">Pricing</a>
            </li>
            <li><a href="404.php">404</a>
            </li>
            <li><a href="registration.php">Registration</a>
            </li>
            <li class="divider"></li>
            <li><a href="privacy.php">Privacy Policy</a>
            </li>
            <li><a href="terms.php">Terms of Use</a>
            </li>
        </ul>
    </li>
    <li><a href="blog.php">Blog</a>
    </li>
    <li><a href="contact-us.php">Contact</a>
    </li>
</ul>

CSS

.selected {
    background-color: green;
}

JavaScript

$(document).ready(function () {
    var $listItems = $('ul li');
    $listItems.click(function () {
        $listItems.removeClass('selected');
        $(this).addClass('selected');
        return false;
    });
});