JSFiddle - React, Tailwind, and code Playground

by joycse06

HTML

<div style="display:block;">
    <ul class="menu">
        <li><a href="#firstDiv">One</a></li>
        <li><a href="#secondDiv">Two</a></li>
        <li><a href="#thirdDiv">Three</a></li>
        <li><a href="#fourthDiv">Four</a></li>
    </ul>
</div>


<div style="width:1000px; height:450px; margin-top:50px;">
    
    <div style="width:350px; height:250px; margin:0 auto;">
    <div id="firstDiv" style="background:#03F; width:350px; height:250px; float:left; display:none;">First Div</div>
    <div id="secondDiv" style="background:#06F; width:350px; height:250px; float:left; display:none;">Second Div</div>
    <div id="thirdDiv" style="background:#09F; width:350px; height:250px; float:left; display:none;">Third Div</div>
    <div id="fourthDiv" style="background:#0CF; width:350px; height:250px; float:left; display:none;">Fourth Div</div>
    </div>

</div>

JavaScript

$(document).ready(function() {
    
    var tabs = $('ul.menu li a');
    
    tabs.bind('click',function(event){
        var $anchor = $(this);
        var ids = tabs.each(function(){
           $($(this).attr('href')).hide();   
        });
        $($anchor.attr('href')).fadeIn('slow');
        event.preventDefault();
    });
    
    
});