기본 탭

<!-- role은 script 처리. -->
<div class="nav-tab" data-tab="group1">
    <!-- button에 id가 없으면 스크립트로 부여됨. -->
    <!-- tabindex, aria-selected, aria-controls 스크립트로 부여됨. -->
    <button type="button" class="on" data-tab-trigger="#tab1">Tab1</button>
    <button type="button" data-tab-trigger="#tab2">Tab2</button>
    <button type="button" data-tab-trigger="#tab3">Tab3</button>
    <button type="button" data-tab-trigger="#tab4">Tab4</button>
</div>

<!-- tabindex, aria-labelledby 스크립트로 부여됨. -->
<div id="tab1" data-tab-target="group1">
    tab1
</div>
<div id="tab2" data-tab-target="group1">
    tab2
</div>
<div id="tab3" data-tab-target="group1">
    tab3
</div>
<div id="tab4" data-tab-target="group1">
    tab4
</div>

애니메이션 효과 없는 탭

시점에 따른 이벤트

document.querySelectorAll('[data-tab]').forEach(function (el) {
    /* e.trigger: [data-tab-trigger]
     * e.target: [data-tab-target]
     */
    // 열릴 때
    el.addEventListener('tab.showing', function (e) {
        console.log(e.target, e.trigger, 'showing');
    })
    // 열린 후
    el.addEventListener('tab.shown', function (e) {
        console.log(e.target, e.trigger, 'shown');
    })
    // 닫힐 때
    el.addEventListener('tab.hiding', function (e) {
        console.log(e.target, e.trigger, 'hiding');
    })
    // 닫힌 후
    el.addEventListener('tab.hidden', function (e) {
        console.log(e.target, e.trigger, 'hidden');
    })
})

Component 호출(feat. 비동기)

const tabEl = document.querySelector('[data-tab="group1"]');
const tab = new SKY.Tab(tabEl);

특정 탭 열기

tab.show(1); // number
tab.show('#tab2'); // string
tab.show(document.querySelector('#tab2')); // object