JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

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="display activeDiv">This div is active</div>
<div class="display inactiveDiv show_hide">This div is inactive</div>
<div class="display 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() {
    $('ul#chooseType li a').click(function(e) {  
        $('ul#chooseType li a').removeClass('selected');
        $(this).addClass('selected');
        $('.display').addClass('show_hide');
        $('.display.'+this.id+'Div').removeClass('show_hide');
    });
});