JSFiddle - React, Tailwind, and code Playground

by radu

HTML

<div id="nav">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
    <div class="parent">
        <div class="a">
            <p>this is a</p>
        </div>   
        <div class="b">
            <p>this is b</p>
        </div>
        <div class="c">
            <p>this is c</p>
        </div>
        <div class="d">
            <p>this is d</p>
        </div>
    </div>
</div>

JavaScript

$('.parent  div').hide();

$('#nav li').click(function() {
    console.log($(this).index());
    var $div = $('.parent > div').eq($(this).index());
    $div.show();
    $('.parent > div').not($div).hide();
});