JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div class="tab" id="tab1">
<ul class="tab-list pkg">
<li class="selected"><a href="#tabbox-a">tabA</a></li>
<li><a href="#tabbox-b">tabB</a></li>
<li><a href="#tabbox-c">tabC</a></li>
</ul>

<div class="panelwrap">
<div class="tab-box" id="tabbox-a">
<ul class="home_ul">
<li><a href=""><span>reset.cssやnormalize.css、box-sizingなどを選んでシンプルなHTMLのスターターセットを作れるSiimpler</span></a></li>
<li><a href=""><span>まとめて読みたい記事や薦めたい記事をリスト化してKindleやiPad、iPhoneなどに送信出来るWebサービス・Readlists</span></a></li>
</ul>
</div>

<div class="tab-box" id="tabbox-b">
<ul>
    <li class="cat-item cat-item-127"><a href="" title="iPhoneの記事">iPhone / iPad</a></li>
    <li class="cat-item cat-item-14"><a href="" title="SEOに関するトピック">SEO</a></li>
    <li class="cat-item cat-item-17"><a href="" title="Ｗｅｂサービスに関するトピック">Webサービス</a></li>
</ul>
</div>

<div class="tab-box" id="tabbox-c">
<ul class="home_ul">
<li><a href=""><span>reset.cssやnormalize.css、box-sizingなどを選んでシンプルなHTMLのスターターセットを作れるSiimpler</span></a></li>
<li><a href=""><span>まとめて読みたい記事や薦めたい記事をリスト化してKindleやiPad、iPhoneなどに送信出来るWebサービス・Readlists</span></a></li>
<li class="cat-item cat-item-17"><a href="" title="Ｗｅｂサービスに関するトピック">Webサービス</a></li>
</ul>
</div>

<!-- / #tab1 .tab --></div>

JavaScript

function tabs(e)
{
    e = $(e);
        
 
    e.find('.tab-box').hide();
    

    var dt = e.find('li.selected a').attr('href');
    e.find(dt).show();
    
    e.find('.tab-list a').click(function() {
   
        e.find('.selected').removeClass('selected');
        e.find('.tab-box').hide();
        $(this).parents('li').addClass('selected');
        
 
        var st = $(this).attr('href');
        
        e.find(st).show();
        
        return false;   
    });
}

tabs('#tab1');
tabs('#tab2');
tabs('#tab3');