JSFiddle - React, Tailwind, and code Playground

by adeneo

HTML

<div id="filemenu">                     <!-- right tabs menu -->
<ul id="fm_ul">
 <li class="filetabs">File
  <ul>
   <li class="m_items"><a href="#"><span class="aHeading">New</span><span class="shortcutK">Ctrl-U</span></a></li>
   <li class="m_items"><a href="#"><span class="aHeading">Open</span><span class="shortcutK">Ctrl-Z</span></a></li>
   <li class="m_items"><a href="#"><span class="aHeading">Save</span><span class="shortcutK">Ctrl-T</span></a></li>
   <li class="m_items"><a href="#"><span class="aHeading">Exit</span><span class="shortcutK">Ctrl-Q</span></a></li>
  </ul>
 </li>
 <li class="filetabs">Edit
  <ul>
   <li class="m_items"><a href="#"><span class="aHeading">Undo</span><span class="shortcutK">Ctrl-M</span></a></li>
   <li class="m_items"><a href="#"><span class="aHeading">Redo</span><span class="shortcutK">Ctrl-S</span></a></li>
   <li class="m_items"><a href="#"><span class="aHeading">Zoom In</span><span class="shortcutK">Ctrl-R</span></a></li>
   <li class="m_items"><a href="#"><span class="aHeading">Zoom Out</span><span class="shortcutK">Ctrl-Q</span></a></li>
  </ul>
 </li>
</ul>
</div>

CSS

.cTabActive a {color: green;}

.cPrevTabActive a {color: red;}

JavaScript

$('.filetabs').on('click', function() {
    var aFileTabs = $('.filetabs'),
        curTab = $(this),
        prevCurTab = $('.cTabActive').parent();
    
    $('.cTabActive').removeClass('cTabActive').addClass('cPrevTabActive');
    $('ul', curTab).removeClass('cPrevTabActive').addClass ('cTabActive');
});