JSFiddle - React, Tailwind, and code Playground

by Ricardo Salazar

HTML

<body>
<div class="navbar">
    <ul>
       <a href="#"><li>Home</li></a>
       <a href="#"><li>Useful Sites</li></a>
       <a href="#"><li class="currentpage">Software</li></a>
       <a href="#"><li>The Workbench</li></a>
        <a href="#"><li>Contact</li></a>
    </ul>
</div>
</body>

CSS

.liactive{color:#FAFAFA;background-color:#000000;}
ul{list-style:none;}
a{text-decoration:none;}

JavaScript

$(document).ready(function(){

$('ul li').click(function(){
  var items=$('ul li').get();
  for(var i=0;i<items.length;i++)
  $(items[i]).removeClass('liactive');
  $(this).addClass('liactive');
 });

});