JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul class="tabmenu">
    <li><a href="#tab01">tabmenu01</a></li>
    <li><a href="#tab02">tabmenu02</a></li>
    <li><a href="#tab03">tabmenu03</a></li>
</ul>
<div id="tab01" class="tabcontent">tabcontent01</div>
<div id="tab02" class="tabcontent">tabcontent02</div>
<div id="tab03" class="tabcontent">tabcontent03</div>

CSS

.tabmenu {list-style: none; padding: 0;}
.tabmenu li {float: left;}
.tabmenu li.on {background: #000; color: #fff;}
.tabmenu li a {display: block; padding: 5px; text-decoration: none;}
.tabmenu li.on a {color: #fff;}

.tabcontent {clear: both; border: 1px solid #000; padding: 20px 0;}

JavaScript

$('.tabmenu li:first-child').addClass('on');
$('.tabcontent').hide();
$('.tabcontent:first').show();
$('.tabmenu li a').click(function(event) { 
    event.preventDefault();
    var hrefs = $(this).attr('href');
    $(this).parent().siblings().removeClass();
    $(this).parent().addClass('on');
    $('.tabcontent').hide();
    $(hrefs).slideDown('slow');
});