JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div class="tab" id="tab1">

<ul class="tab-list pkg">

<li><a href="javascript:void(0);">Article</a></li>

<li><a href="javascript:void(0);">Category</a></li>

<li><a href="javascript:void(0);">Tag</a></li>

</ul>



<div class="panelwrap">

<div class="tab-box">

<ul class="home_ul">

<li><a href="http://localhost/wordpress/blog/?p=1">Hello world!</a></li>

<li><a href="http://localhost/wordpress/blog/?p=358">読みやすさのテスト</a></li>

<li><a href="http://localhost/wordpress/blog/?p=188">レイアウトテスト</a></li>

<li><a href="http://localhost/wordpress/blog/?p=128">画像テスト</a></li>

<li><a href="http://localhost/wordpress/blog/?p=555">投稿フォーマットのテスト: ギャラリー</a></li>

<li><a href="http://localhost/wordpress/blog/?p=559">投稿フォーマットのテスト: アサイド</a></li>

<li><a href="http://localhost/wordpress/blog/?p=562">投稿フォーマットのテスト: チャット</a></li>

</ul>

</div>



<div class="tab-box">

<ul>

    <li class="cat-item cat-item-5"><a href="http://localhost/wordpress/blog/?cat=5" title="Cat A に含まれる投稿をすべて表示">Cat A</a>
</li>
    <li class="cat-item cat-item-6"><a href="http://localhost/wordpress/blog/?cat=6" title="Cat B に含まれる投稿をすべて表示">Cat B</a>
</li>
    <li class="cat-item cat-item-7"><a href="http://localhost/wordpress/blog/?cat=7" title="Cat C に含まれる投稿をすべて表示">Cat C</a>
</li>
    <li class="cat-item cat-item-9"><a href="http://localhost/wordpress/blog/?cat=9" title="Foo Parent に含まれる投稿をすべて表示">Foo Parent</a>
<ul class='children'>
    <li class="cat-item cat-item-56"><a href="http://localhost/wordpress/blog/?cat=56" title="Foo A に含まれる投稿をすべて表示">Foo A</a>
</li>
</ul>
</li>
    <li class="cat-item cat-item-10"><a href="http://localhost/wordpress/blog/?cat=10" title="あさひ に含まれる投稿をすべて表示">あさひ</a>
</li>
    <li class="cat-item cat-item-11"><a href="http://localhost/wordpress/blog/?cat=11" title="いろは に含まれる投稿をすべて表示">いろは</a>
</li>
    <li class="cat-item cat-item-12"><a href="http://localhost/wordpress/blog/?cat=12" title="うえの に含まれる投稿をすべて表示">うえの</a>
</li>
    <li class="cat-item cat-item-13"><a...

JavaScript

(function($) {
    $.fn.t = function(options) {
        var o = $.extend({
            ti: '#tab',
            e: '.tab-list li',
            b: '.tab-box'
        }, options);
    
        $(o.e, o.ti).each(function() {
            $(o.b, o.ti).not(':first').hide();
            $(o.e, o.ti).eq(0).addClass('selected');
            
            $(this).click(function() {
                var ind = $(o.e, o.ti).index(this);
                $(o.e, o.ti).removeClass('selected');
                $(this).addClass('selected');
                $(o.b, o.ti).hide().eq(ind).addClass('selected').show();
            });
        });
        return this;
    };
})(jQuery);

$(function() {
    $.fn.t({ ti: '#tab1'});
    $.fn.t({ ti: '#tab2'});
    $.fn.t({ ti: '#tab3'});
});