JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<div class="col-sm-9 padding-right">
    <div id="tab-container2" class='tab-container'>
        <ul class='etabs'>
            <li class='tab'><a href="#sirkethesaptab">Şirket Hesabı</a></li>
            <li class='tab'><a href="#musterihesaptab">Müşteri Hesabı</a></li>
            <li class='tab'><a href="#odemetab">Ödemeler</a></li>
            <li class='tab'><a href="#harcamatab">Harcamalar</a></li>
            <li class='tab'><a href="#personeltab">Personel</a></li>
        </ul>
        <div class='panel-container'>
            <div id="sirkethesaptab">
                <h2>sirkethesaptab</h2>
            </div>
            <div id="musterihesaptab">
                <h2>musterihesaptab</h2>
            </div>
            <div id="odemetab">
                <h2>odemetab</h2>
            </div>
            <div id="harcamatab">
                <h2>harcamatab</h2>
            </div>
            <div id="personeltab">
                <h2>personeltab</h2>
            </div>
        </div>
    </div>
</div>
<UL>
    <li><a class="open-tab" href="#sirkethesaptab">Şirket Hesabı</a></li>
    <li><a class="open-tab" href="#musterihesaptab">Müşteri Hesabı</a></li>
    <li><a class="open-tab" href="#odemetab">Ödemeler</a></li>
    <li><a class="open-tab" href="#harcamatab">Harcamalar</a></li>
    <li><a class="open-tab" href="#personeltab">Personel</a></li>
</UL>

JavaScript

$('#tab-container2').tabs({
    active: 1
});

$('.open-tab').click(function (event) {
    var tabIndex = $(this).closest("li").index();
    $('#tab-container2').tabs({active: tabIndex});
});