JSFiddle - React, Tailwind, and code Playground

by tymeJV

HTML

<ul id="chooseType">
    <li><a id="active" href="#" title="" class="active selected">Active</a></li>
    <li><a id="inactive" href="#" title="" class="inactive">Inactive</a></li>
    <li><a id="thirdMenu" href="#" title="" class="thirdMenu">Third Menu</a></li>
</ul>
<div class="activeDiv">This div is active</div>
<div class="inactiveDiv show_hide">This div is inactive</div>
<div class="thirdMenuDiv show_hide">This div is related to the third menu</div>

CSS

a.selected {
    background-color: #f90;
}

.show_hide {
    display: none;
}

JavaScript

$(document).ready(function() {
    $('#active').click(function(){
            $('.activeDiv').removeClass('show_hide');
            $('.inactiveDiv').addClass('show_hide');
            $('.thirdMenuDiv').addClass('show_hide');
            $('#active').addClass('selected');
            $('#inactive').removeClass('selected');
            $('#thirdMenu').removeClass('selected');
        });
        $('#inactive').click(function(){
            $('.activeDiv').addClass('show_hide');
            $('.inactiveDiv').removeClass('show_hide');
            $('.thirdMenuDiv').addClass('show_hide');
            $('#active').removeClass('selected');
            $('#inactive').addClass('selected');
            $('#thirdMenu').removeClass('selected');
        });
        $('#thirdMenu').click(function(){
            $('.activeDiv').addClass('show_hide');
            $('.inactiveDiv').addClass('show_hide');
            $('.thirdMenuDiv').removeClass('show_hide');
            $('#active').removeClass('selected');
            $('#inactive').removeClass('selected');
            $('#thirdMenu').addClass('selected');
        });
});