JSFiddle - React, Tailwind, and code Playground

by Dipak1991

HTML

<header>
    <nav>
        <ul>
            <li><a href="<s:url value='/home'  />" class="current">Home</a>

            </li>
            <li><a href="<s:url value='/work' />">work</a>

            </li>
            <li><a href="<s:url value='/others' />">Others</a>

            </li>
        </ul>
    </nav>
</header>

CSS

body {
    width: 100%;
    line-height: 1;
}
header {
    background: #fff;
    width: 100%;
    height: 76px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}
a.active {
    color: red;
}
nav {
    float: right;
    padding: 20px;
}
ul {
    list-style: none;
}
li {
    display: inline-block;
    float: left;
    padding: 10px
}
.current {
    color: #333333;
}

JavaScript

$(document).ready(function (e) {
    $("ul li a").click(function (e) {        
        $("ul li a").removeClass('active');
        $(this).toggleClass('active');
        e.preventDefault();
    });
});