JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

HTML

<div id="nav">
    <ul>
        <li><a href="#">One</a>

        </li>
        <li><a href="#">Two</a>

        </li>
        <li><a href="#">Three</a>

        </li>
        <li><a href="#">Four</a>

        </li>
    </ul>
</div>

CSS

#nav {
    width:480px;
    margin:1em auto;
}
#nav ul {
    margin:1em auto;
    padding:0;
    font:1em"Arial Black", sans-serif;
}
#nav ul li {
    display:inline;
}
#nav ul li a {
    text-decoration:none;
    margin:0;
    padding:.25em 25px;
    background:#666;
    color:#ffffff;
}
#nav ul li a:hover {
    background:#ff9900;
    color:#ffffff;
}
#nav ul li a.active {
    background:#ff9900;
    color:#ffffff;
}

JavaScript

$(function () {

    $('#nav ul li a').each(function () {
        var path = window.location.href;
        var current = path.substring(path.lastIndexOf('/') + 1);
        var url = $(this).attr('href');

        if (url == current) {
            $(this).addClass('active');
        };
    });
});