jQueryでタブ切り替えを実装する

jQueryでタブ切り替えを実装する方法を記します。

Contents

実装イメージ
HTML
CSS
jQuery
ソースコード全文

実装イメージ

下記のデモのようにタブをクリックすると、コンテンツが切り替わるタブ切り替えを実装します。

タブ1
タブ2
タブ3

タブ1の中身

タブ2の中身

タブ3の中身

HTML

タブメニューとコンテンツをHTMLで記述します。jQueryも読み込んでおきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="tab-container">
    <ul class="tab-togle-group">
        <li class="tab-toggle on">タブ1</li>
        <li class="tab-toggle">タブ2</li>
        <li class="tab-toggle">タブ3</li>
    </ul>
    <div class="tab-content show">
        <p>タブ1の中身</p>
    </div>
    <div class="tab-content">
        <p>タブ2の中身</p>
    </div>
    <div class="tab-content">
        <p>タブ3の中身</p>
    </div>
</div>

CSS

CSSで表示・非表示の切り分けと見た目の調整をします。わかりやすいように、タブメニューとタブコンテンツに背景色を付けています。

.tab-container{ width: 100%; }
.tab-togle-group{ display: flex; }
.tab-toggle{
    border: 1px solid #000;
    width: 100%;
    text-align: center;
    padding: 8px;
    cursor: pointer;
}
.tab-toggle:first-child{ border-radius: 15px 0 0 0; }
.tab-toggle:last-child{ border-radius: 0 15px 0 0; }

.tab-toggle.on:nth-of-type(1){ background-color: yellow; }
.tab-toggle.on:nth-of-type(2){ background-color: orange; }
.tab-toggle.on:nth-of-type(3){ background-color: red; }

.tab-content{
    border: 1px solid #000;
    text-align: center;
    display: none;
}
.tab-content.show{
    display: block;
}
.tab-content p{
    padding: 100px;
}
.tab-content:nth-of-type(1){ background-color: yellow; }
.tab-content:nth-of-type(2){ background-color: orange; }
.tab-content:nth-of-type(3){ background-color: red; }

jQuery

クリックしたタブと同じtab-containerクラス内だけでタブの切り替えをするようにしているので、同一ページにいくつタブコンテンツを置いても問題なく動くようになっています。

$(".tab-toggle").on("click",function(){
    $(this).closest(".tab-container").find(".tab-content").removeClass("show")
    $(this).closest(".tab-container").find(".tab-content").eq($(this).index()).addClass("show")
    $(this).closest(".tab-container").find(".tab-toggle").removeClass("on")
    $(this).addClass("on")
})

ソースコード全文

最後にソースコードを全文載せておきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="tab-container">
    <ul class="tab-togle-group">
        <li class="tab-toggle on">タブ1</li>
        <li class="tab-toggle">タブ2</li>
        <li class="tab-toggle">タブ3</li>
    </ul>
    <div class="tab-content show">
        <p>タブ1の中身</p>
    </div>
    <div class="tab-content">
        <p>タブ2の中身</p>
    </div>
    <div class="tab-content">
        <p>タブ3の中身</p>
    </div>
</div>

<style>
    .tab-container{ width: 100%; }
    .tab-togle-group{ display: flex; }
    .tab-toggle{
        border: 1px solid #000;
        width: 100%;
        text-align: center;
        padding: 8px;
        cursor: pointer;
    }
    .tab-toggle:first-child{ border-radius: 15px 0 0 0; }
    .tab-toggle:last-child{ border-radius: 0 15px 0 0; }

    .tab-toggle.on:nth-of-type(1){ background-color: yellow; }
    .tab-toggle.on:nth-of-type(2){ background-color: orange; }
    .tab-toggle.on:nth-of-type(3){ background-color: red; }

    .tab-content{
        border: 1px solid #000;
        text-align: center;
        display: none;
    }
    .tab-content.show{
        display: block;
    }
    .tab-content p{
        padding: 100px;
    }
    .tab-content:nth-of-type(1){ background-color: yellow; }
    .tab-content:nth-of-type(2){ background-color: orange; }
    .tab-content:nth-of-type(3){ background-color: red; }
</style>
<script>
    $(".tab-toggle").on("click",function(){
        $(this).closest(".tab-container").find(".tab-content").removeClass("show")
        $(this).closest(".tab-container").find(".tab-content").eq($(this).index()).addClass("show")
        $(this).closest(".tab-container").find(".tab-toggle").removeClass("on")
        $(this).addClass("on")
    })
</script>

以上、jQueryでタブ切り替えを実装する方法でした。