JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<nav>
  <ul>   
  <li><a href="#" class="selected target"><span>2017</span> &raquo;</a>
      <ul>
        <li><a href="#">2016</a></li>
        <li><a href="#">2015</a></li>
        <li><a href="#">2014</a></li>    
      </ul>
    </li>  
  </ul>
</nav>

CSS

nav a {
  text-decoration:none;
  color:lightgray;
}
nav a.selected {
  background-color:deepskyblue;
  color:aliceblue;
}

JavaScript

// highlight current link
$("nav a").click(function(){
  $("nav a").removeClass("selected");
  $(this).toggleClass("selected");
});

// switch htmlString of .target span
$("nav > ul > li > a + ul li a").click(function() {
  var htmlString = $(this).html();
  $(".target span").text(htmlString);
});