Zenn
🐙

素のCSSとJavaScriptでタブメニューを作る

2023/06/05に公開
Bootstrap
CSS
HTML
JavaScript
tech

素のCSSとJavaScriptで、簡単に使えるタブメニューを作りたいなと思いました。
実際、簡単になっているかはわかりません。
スタイルを自由に変更できるようにしたかったので、その観点を重視してみました。

環境

HTML, CSS, JavaScript
（レイアウト用にBootstrap5.0を使ってます）

表示結果

ヘッダーをクリックすると、ボディーの表示内容が変わるシンプルなメニューです。

HTML

Bootstrapの読み込みとかは抜いてます。
ヘッダーとボディーに data-tab-id 属性を付け、同じ値で対応させます。

<body class="container-fluid h-h100 bg-light">
    <div class="row center-align" style="height: 5%;">
        <!-- タブヘッダー -->
        <div id="tab-head-parent" class="col-5 h-h100 center-align">    
            <div data-tab-id="1" class="tab-head-card h-h100 center-align" style="width: 15%;">Tab-A</div>
            
            <div class="h-h100" style="width: 2.5%;"></div>
            
            <div data-tab-id="2" class="tab-head-card disable-tab-head h-h100 center-align" style="width: 15%;">Tab-B</div>
            
            <div class="h-h100" style="width: 2.5%;"></div>
            
            <div data-tab-id="3" class="tab-head-card disable-tab-head h-h100 center-align" style="width: 15%;">Tab-C</div>
        </div>
    </div>

    <div class="row center-align" style="height: 20%;">
        <div class="col-5 h-h100">
            <!-- タブボディー -->
            <div data-tab-id="1" class="w-w100 h-h100 tab-body-card center-align">Tab-A-body</div>
                        
            <div data-tab-id="2" class="w-w100 h-h100 tab-body-card center-align" style="display: none;">Tab-B-body</div>

            <div data-tab-id="3" class="w-w100 h-h100 tab-body-card center-align" style="display: none;">Tab-C-body</div>
        </div>
    </div>
</body>

CSS

上3つがタブ用で、.w-w100 からはおまけです。

/* ======= タブヘッダー用 ======= */
.tab-head-card {
    border-radius: 0.75em 0.75em 0 0;
    background-color: rgba(255, 127, 0, 1);
    cursor: pointer;
    transition: .2s;
}

/* ======= 無効なタブヘッダー用 ======= */
.disable-tab-head {
    opacity: 0.5;
}

/* ======= タブ本体用 ======= */
.tab-body-card {
    border-radius: 0 0 0.75em 0.75em;
    border-top: 0.15em solid rgba(255, 127, 0, 1);
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0.15rem 0.4rem 0.05rem rgba(0, 0, 0, 0.1), 0 0 0.02rem rgba(0, 0, 0, 0.1);
    transition: .2s;
}

/* 幅100% */
.w-w100 {
    width: 100%;
}

/* 高さ100% */
.h-h100 {
    height: 100%;
}

/* 縦横中央揃え */
.center-align {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 縦中央、左揃え */
.vcenter-align {
    display: flex;
    align-items: center;
}

JavaScript

まず、ヘッダーの親要素に対するクリックイベントを拾います。
そして、HTMLで付与したdata-tab-id属性を使って、targetからどれをクリックしたのかを探ります。

表示形式によっては、最後に捜査しているdisplayをblockに変えるか、変数にしてもよいですね。

document.getElementById('tab-head-parent').addEventListener('click', ev => {
    const el = ev.target;
    
    if (el.hasAttribute('data-tab-id')) {        
        let tabId;
        let tabEnableId = el.getAttribute('data-tab-id');
        
        // ヘッダーの表示切替
        document.querySelectorAll('.tab-head-card').forEach((tabHeadDoc) => {
            tabId = tabHeadDoc.getAttribute('data-tab-id');
            
            if (tabId === tabEnableId) {
                tabHeadDoc.classList.remove('disable-tab-head');
            } else {
                tabHeadDoc.classList.add('disable-tab-head');
            }
        });
        
        // 本体の表示切替
        document.querySelectorAll('.tab-body-card').forEach((tabBodyDoc) => {
            tabId = tabBodyDoc.getAttribute('data-tab-id');

            if (tabId === tabEnableId) {
                tabBodyDoc.style.display = 'flex';
            } else {
                tabBodyDoc.style.display = 'none';
            }
        });        
    }
});

所感？

タブメニューを解説している方はたくさんいらっしゃると思います。
その点からもあまり有用ではないかもしれませんが、わりとまとまったかなと思うので
ご参考になれば幸いです。
Bootstrapでも高さとか幅指定はありますが、そこは目を瞑ってください。

Discussion