mgn-tab

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

https://github.com/frontend-isobar-jp/mgn-tab

Default


let tab = new mgnTab('.j-tab');


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

Option


let tab2 = new mgnTab(
    '.j-tab2',
    {
        fadeSpeed: 600
    }
);

tab2.Open( ".open" );

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


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