JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu1">
    <li><a href="#">Home</a></li>
    <li><a href="#">Activities</a></li>
    <li><a href="#">Members</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Publications</a></li>
    <li><a href="#">Contacts</a></li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

CSS

#menu1 {
float:left;
width:100%;
list-style-type:none;
padding:0;
margin:0;
}

#menu1 li {
display:inline;
text-align:center;
}

#menu1 li a {
float:left;
width:120px;
padding:0 5px 0 5px;
}

#menu1 li a:hover {
background-color:#eee;
}

#menu1 li a:active {
background-color:#ddd;
}

#menu1 li a.active {
background-color:#eee;
}

JavaScript

$(document).ready(function(){
    $('#menu1 li a').click(function (e){
        e.preventDefault();
        console.log($('#menu1 li.active'));
        $('#menu1 li a.active').removeClass('active');
        console.log($(this));
        $(this).addClass('active');
        console.log('done');
    });         
});