JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<ul class="menu">
    <li class="current-menu-item current_page_item"><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">four</a></li>
</ul>

CSS

.current-menu-item {color:red;}
.current_page_item {background-color:yellow;}

JavaScript

/*jQuery("ul.menu li a").click(function(){
    jQuery('ul.menu li').each(function() {
        jQuery(this).removeClass('current-menu-item');
        jQuery(this).removeClass('current_page_item');
    });
    jQuery(this).parents('li').addClass('current_page_item');
    jQuery(this).parents('li').addClass('current-menu-item');
});
*/
jQuery("ul.menu li a").click(function(){
    jQuery('ul.menu li').removeClass('current-menu-item current_page_item');
    jQuery(this).parent('li').addClass('current_page_item current-menu-item');
});