【jQuery】data属性で実装するタブUI

jQueryでタブUIを作る時は、data属性使った方が幸せに開発できたので共有。
割と汎用的だと思います。

• タブを切り替えるボタンにはdata-select="hoge"、タブにはdata-tab="hoge"を設定して一致したコンテンツを出し分ける
• 表示・非表示の切り替えはjQueryのメソッドで実行
• アクティブな状態のタブ・タブを切り替えるボタンには、cssのスタイリング用にis-activeを付与

const switchTab = () => {
    // タブボタンのclass
    const tabBtn = 'js-select';
    // 切り替えるタブのclass
    const tabContent = 'js-tab';
    // 現在表示中のタブ・ボタンにつけるclass
    const activeFlag = 'is-active';
    // タブボタンのdata属性
    const dataSelect = 'select';
    // タブのdata属性
    const dataTab = 'tab';

    // まずは各タブを非表示（デフォルトで表示するタブにはis-activeをつけておく）
    $(`.${tabContent}`).each(function() {
        if(!$(this).hasClass(activeFlag)) {
            $(this).hide();
        }
    });
    
    // タブ切替
    $(`.${tabBtn}`).on('click', function(){
        // クリックされたボタンのdata属性を取得
        let target = $(this).data(dataSelect);
	// activeクラスの除去・付与
        $(`.${tabBtn}`).removeClass(activeFlag);
        $(`.${tabBtn}[data-${dataSelect}="${target}"]`).addClass(activeFlag);
	// タブコンテンツの非表示・表示、クラスの除去・付与
        $(`.${tabContent}`).hide().removeClass(activeFlag);
        $(`.${tabContent}[data-${dataTab}="${target}"]`).fadeIn().addClass(activeFlag);
    });
}

switchTab();