JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navi">
    <li><a class="menu2" href="#">About MHG</a></li>
    <li><a class="menu3" href="#">Workout Programs</a></li>
    <li><a class="menu4" href="#">Fitness Tips</a></li>
    <li><a class="menu5" href="#">Contact Us</a></li>          
    <li><a class="menu6" href="#">Read Our Blog</a></li>
  </ul>

CSS

.active
{
    background-color:green;
}

JavaScript

$('ul.navi').each(function(){
		// For each set of tabs, we want to keep track of
		// which tab is active and it's associated content
		var $active, $content, $links = $(this).find('a');

		// If the location.hash matches one of the links, use that as the active tab.
		// If no match is found, use the first link as the initial active tab.
		$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
		$active.addClass('active');
		$content = $($active.attr('href'));

		// Hide the remaining content
		$links.not($active).each(function () {
			$($(this).attr('href')).hide();
		});

		// Bind the click event handler
  
		$(this).on('click', 'a', function(e){
			// Make the old tab inactive.
			$active.removeClass('active');
			$content.hide();

			// Update the variables with the new link and content
			$active = $(this);
			$content = $($(this).attr('href'));
            

			// Make the tab active.
			$active.addClass('active');

			$content.show();

			// Prevent the anchor's default click action
			e.preventDefault();
		});
    
      
    
	});