JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<div id="menu">
  <ul>
    <li class="current"><a>Heading One</a></li>
    <li><a>Heading Two</a></li>
    <li><a>Heading Three</a></li>
    <li><a>Heading Four</a></li>
  </ul>
</div>

CSS

#menu {padding:20px;font-family: Arial, Helvetica, sans-serif;}
#menu ul {list-style:none;font-size:14px;padding:0;}
#menu ul li {float:left;margin-right:10px;}
#menu ul li a {color:#999;background: #ccc;padding:6px 15px;border-radius:3px;cursor:pointer;}
#menu ul li.current a {color:#FF0!important;background: #000;}

JavaScript

$('#menu ul li').click( function(){
  if ($(this).hasClass('current') ) { 
    $(this).removeClass('current'); 
  }    
  else {
    $('#menu ul li').removeClass('current');
    $(this).addClass('current'); 
  }
});