JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<ul id="nav" style="list-style-type: none; margin: 0; padding: 0;">
    <li><a href="#panel2">Panel 1</a></li> 
</ul>

<div id="panel2" class="panel">This is panel 2</div>

CSS

a { display: block; width: 50px; height: 50px; border: 1px solid black; }

#nav a.current {
    background-image: url('http://placehold.it/50x50/aa0000'); 
    background-repeat: no-repeat;
}

#nav a:hover {
    background-image: url('http://placehold.it/50x50/00aa00');
    background-repeat: no-repeat;
}

JavaScript

$('#nav a').click(function(e) {
    e.preventDefault();
    var panel = $(this).attr('href');
    $(this).addClass("current");
    $("a", $(this).parents("li").siblings("li")).removeClass("current");
    // show slide
    $(this).parents("ul").siblings("div").hide();
    $(panel).show();
})