HOME > JavaScript > JavaScriptで動くタブメニューの作り方【コピペで1分】

JavaScriptで動くタブメニューの作り方【コピペで1分】

目次: JavaScriptで動くタブメニューのDEMO; JavaScriptで動くタブメニューの作り方解説; HTML記述; css記述; javascript記述

JavaScriptで動くタブメニューのDEMO

DEMOページ

JavaScriptで動くタブメニューの作り方解説

JavaScriptを使用してタブのメニューと中のコンテンツが連動して動くように実装。

1．HTMLは親要素と子要素のリスト（ul・li）要素で構成する
2．コンテンツにdisplay:none;をかけて非表示にしておき、acvtiveクラスを作りdisplay:block;を設定
3．最初に表示しておきたいメニュとコンテンツにactiveを設定
4．jsを使用してクリックされたものと紐づいたコンテンツが表示されるように設定
5．正しく動作していれば完成です。

HTML記述

HTMLをbody内の表示位置に記載します。

<ul class="tabmenu">
    <li class="tablist active">JavaScript</li>
    <li class="tablist">jQuery</li>
    <li class="tablist">cssAnimation</li>
    <li class="tablist">HTML</li>
</ul>
<ul>
    <li class="tabcontents active">コンテンツタブ1<br>JavaScript</li>
    <li class="tabcontents">コンテンツタブ2<br>jQuery</li>
    <li class="tabcontents">コンテンツタブ3<br>cssAnimation</li>
    <li class="tabcontents">コンテンツタブ4<br>JavaScript</li>
</ul>

css記述

cssを<style>~</style>または自作cssの中に記述します。

<style>
/* リセット */
*{
    margin:0;
    padding:0;
}

/* タブ親指定 */
.tabmenu {
    display: flex;
    justify-content: center;
    margin-bottom: 2px;
}

/* タブメニュー指定 */
.tablist {
    display: inline-block;
    border: 1px solid #333;
    padding: 20px 40px;
    cursor: pointer;
    width: 100%;
    text-align: center;
}
/* 最後のタブメニュー以外にかける指定 */
.tablist:not(:last-child) {
    margin-right: 1px;
}

/* タブコンテンツ指定 */
.tabcontents {
    display: none;
    border: 1px solid #333;
    padding: 20px 40px;

}

/* クリックされた時の指定 */
.tablist.active,
.tabcontents.active {
    display: block;
}
.tablist.active{
    background-color: #8ed8ff;
}
</style>

Javascript記述

javascriptを<script>~</script>または自作jsの中に記述します。

<script> 
// ドキュメントの読み込みが完了した時に実行する関数
document.addEventListener('DOMContentLoaded', () => {
    // .tablistクラスの要素をすべて取得し、変数tablistsに格納
    const tablists = document.querySelectorAll('.tablist');
    // .tabcontentsクラスの要素をすべて取得し、変数tabcontentsに格納
    const tabcontents = document.querySelectorAll('.tabcontents');

    // クラスactiveを削除する関数
    function removeActiveClass() {
        // tablistsの要素すべてに対して、クラスactiveを削除する
        tablists.forEach(tablist => tablist.classList.remove('active'));
        // tabcontentsの要素すべてに対して、クラスactiveを削除する
        tabcontents.forEach(tabcontent => tabcontent.classList.remove('active'));
    }

    // クラスactiveを追加する関数
    function addActiveClass(index) {
        // 指定されたindexのtablistにクラスactiveを追加する
        tablists[index].classList.add('active');
        // 指定されたindexのtabcontentにクラスactiveを追加する
        tabcontents[index].classList.add('active');
    }

    // tablistsの要素すべてに対して、クリックイベントを設定する
    tablists.forEach((tablist, index) => {
        tablist.addEventListener('click', () => {
            // クラスactiveを削除する関数を呼び出す
            removeActiveClass();
            // クリックされたtablistのインデックスを指定して、クラスactiveを追加する関数を呼び出す
            addActiveClass(index);
        });
    });
});
</script>