jQueryで手軽に実装！シンプルなタブ切り替え機能

jQueryを使ってタブ機能を実装すると、ページ上の限られたスペース内で複数のコンテンツを効果的に表示できます。この記事では、jQueryを使ってタブ機能を実装する方法についてご紹介していきます。

必要なもの

• 基本的なHTMLとCSSの知識
• jQueryライブラリが読み込まれている環境

準備

まずは、タブを実装したい環境にjQueryライブラリが読み込まれているか確認してください。

HTMLの準備

まずは、タブとタブのコンテンツを置くためのコンテナをHTMLに記述します。ここでは、<div>タグを使用して、タブのコンテナとコンテンツのコンテナを作成します。

<!-- タブのコンテナ -->
<div class="tab-container">
    <div class="tab active">タブ1</div>
    <div class="tab">タブ2</div>
    <div class="tab">タブ3</div>
</div>

<!-- コンテンツのコンテナ -->
<div class="content-container">
    <div class="content show">タブ1のコンテンツ</div>
    <div class="content">タブ2のコンテンツタブ2のコンテンツ</div>
    <div class="content">タブ3のコンテンツタブ3のコンテンツタブ3のコンテンツ</div>
</div>

タブとコンテンツはその順番に応じて表示させますので、コンテナ内での順番に注意してください。

実践

CSSコード

先ほどのHTMLに、activeとshowというclassがついていたのにお気付きでしたか？このclassを活用するために、まず必要なのはCSSです。
ページ読み込み時はまずコンテンツを隠し、.showがついているものだけを表示するためにこのようにします。

.content {
    display: none;
}
.content.show {
    display: block;
}

これで.showがついている.content以外を非表示にできました。

jQueryコード

今回使用するjQueryのコードはこちらです。

$(function() {
    let tabs = $(".tab");
    $(".tab").on("click", function() {
        $(".active").removeClass("active");
        $(this).addClass("active");
        const index = tabs.index(this);
        $(".content").removeClass("show").eq(index).addClass("show");
    });
});

.hide()や.show()で表示を制御することもできますが、アクティブなタブにclassをつけてデザインを変更するためにこのようなやり方をします。

jQueryコードの解説

jQueryはいくつかのステップに分けて考えると理解しやすくなります。以下、各ステップを詳細に説明していきます。

ドキュメントが完全に読み込まれてから実行

$(function() {});はjQueryにおける文法で、ドキュメントが完全に読み込まれDOMが安全に操作できる状態になった時点で実行される関数を定義します。

$(function() {
    // ここにコードを追加していきます
});

スクリプトがHTML要素を操作する前にその要素が存在していることを確実にしないと、DOM要素を操作するコードがドキュメントの読み込み前に実行される可能性があります。その結果エラーが発生したり、期待した通りの動作をしなかったりすることがあるため、このコードを使用します。

タブと変数の準備

まず、ページ上の全てのタブを取得し、それらを変数に格納します。これにより、後続のコードでタブに対する操作が簡単になります。

let tabs = $(".tab");

タブのクリックイベント

次に、タブがクリックされたときに実行される関数を定義します。この関数内で、いくつかの操作を行います。

$(".tab").on("click", function() {
    // クリックしたらどうなるか指示するコードをここに追加していきます
});

アクティブ状態の管理

クリックされたタブにactiveクラスを追加する前に、既にactiveクラスがある要素からこのクラスを削除します。これにより、一度に一つのタブだけがアクティブ状態になります。

$(".active").removeClass("active");
$(this).addClass("active");

クリックされたタブのインデックスを取得

クリックされたタブが、全タブの中で何番目に位置しているかを判定します。このインデックスは後で、対応するコンテンツを表示するのに使用します。

const index = tabs.index(this);

コンテンツの表示管理

すべてのコンテンツからshowクラスを削除し、クリックされたタブに対応するコンテンツにのみshowクラスを追加します。これにより、アクティブなタブに対応するコンテンツのみが表示されます。

$(".content").removeClass("show").eq(index).addClass("show");

.eq()は特定のインデックスにある要素を選択するために使用されます。詳しくはこちらの記事をご覧ください。
このコードの場合はタブとコンテンツが順番に対応しているため、タブのインデックスを取得し、そのインデックスを使用して.eq()メソッドによって対応する順番のコンテンツを選択し、showというclassを追加します。

完成したコード

これらを合わせると、最初にご紹介したコードになります。

$(function() {
    let tabs = $(".tab");
    $(".tab").on("click", function() {
        $(".active").removeClass("active");
        $(this).addClass("active");
        const index = tabs.index(this);
        $(".content").removeClass("show").eq(index).addClass("show");
    });
});

デモ

タブ部分をクリックするとコンテンツが切り替わることが確認できます。

See the Pen
jQueryで手軽に実装！シンプルなタブ切り替え機能 by GROWORKS (@groworks)
on CodePen.

まとめ

jQueryを使用して、タブとそれに対応するコンテンツの表示を制御するシンプルな例をご紹介しました。初心者の方もこのコードをもとにタブ機能の実装が可能になり、この方法を元に発展的なタブ切り替えにも挑んでいけるでしょう。
必要に応じて取り入れて、機能性が高く見やすいウェブサイトを作成しましょう。