JSFiddle - React, Tailwind, and code Playground

by j3210938120

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/Cookies.js/0.3.1/cookies.js  "></script>
<nav>
<!-- nav menu -->
    <ul class="clearfix">
        <li><a runat="server" href="Slideshow.aspx">Home</a></li>
        <li><a runat="server" class="active" href="AboutUs.aspx">About Us</a></li>
        <li><a runat="server" href="Contact.aspx">Contact Us</a></li>
    </ul>
</nav>

CSS

nav li a.active
{
    border-bottom: 3px solid #fd9625;
}

JavaScript

$(document).ready(function() {
  var index = Cookies.get('active');
  $('.clearfix').find('a').removeClass('active');
  $(".clearfix").find('a').eq(index).addClass('active');
  $('.clearfix').on('click', 'li a', function(e) {
    e.preventDefault();
    $('.clearfix').find('a').removeClass('active');
    $(this).addClass('active');
    Cookies.set('active', $('.clearfix a').index(this));
  });
});