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.
        $links.removeClass('active');
        $content.hide();
        
        if ($(this).closest('li').index() < 3) $(this).closest('ul').find('li a').each(function(i){
            if (i<3)$(this).addClass('active');
        });
        // 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();
    });



});