JSFiddle - React, Tailwind, and code Playground

by adeneo

HTML

<ul id="myList">
        <li><a href="#first">This is the 1st link</a></li>
        <li><a href="#second">This is the 2nd link</a></li>
        <li><a href="#third">This is the 3rd link</a></li>
    </ul>

    <div id="myContainer">
        <div id="first">xxx</div>
        <div id="second">yyy</div>
        <div id="third">zzz</div>
    </div>

CSS

.selected {
            color: red;
        }

        #myContainer div {
            border: 1px solid #333;
        }

JavaScript

$(document).ready(function(){
    var listItems = $('#myList li a'),
        containers = $('#myContainer > div');

    containers.not(':first').hide();
    $('#myList li a:first').addClass('selected');
            
    $(document).on('click', listItems, function(e) {
        e.preventDefault();
        containers.hide().filter(e.target.hash).show();
        listItems.removeClass('selected').filter(e.target).addClass('selected');
    });
});