ds-tab

ds-tab.js は、jQueryを必要としないタブ機能のライブラリです。

https://github.com/dsflon/ds-tab

Default


let dsTab = new DsTab('.tab');


<div class="tab">
    <ul>
        <li><a class="tab_btn">Tab 1</a></li>
        <li><a class="tab_btn">Tab 2</a></li>
        <li><a class="tab_btn">Tab 3</a></li>
    </ul>
    <div class="tab_detail">
        Tab 1 Detail
    </div>
    <div class="tab_detail">
        Tab 2 Detail
    </div>
    <div class="tab_detail">
        Tab 3 Detail
    </div>
</div>
Tab 1 Detail
Tab 2 Detail
Tab 3 Detail

Option


let dsTab2 = new DsTab(
    '.tab2',
    {
        fadeSpeed: 600
    }
);

dsTab2.Open( ".open" );

dsTab2.OpenEnd = function(){
    console.log("OpenEnd");
};


<div class="tab2">
    <ul>
        <li><a class="tab2_btn">Tab 1</a></li>
        <li><a class="tab2_btn open">Tab 2</a></li>
        <li><a class="tab2_btn">Tab 3</a></li>
    </ul>
    <div class="tab2_detail">
        Tab 1 Detail
    </div>
    <div class="tab2_detail">
        Tab 2 Detail
    </div>
    <div class="tab2_detail">
        Tab 3 Detail
    </div>
</div>
Tab 1 Detail
Tab 2 Detail
Tab 3 Detail