【コピペOK！】jQueryで簡単にタブ切り替え出来るメニューの作り方

タブ切り替え出来るメニューってどうやって作るの？

タブの切り替えメニューは実務でそこまで頻繁に使うわけではありませんが、知らないと確実に困る時が来ると思うので出来るようになっておきましょう。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

jQueryを使ったタブ切り替え出来るメニューの作り方

今回はタブの切り替えにアニメーションを入れたタブメニューと、入れないタブメニューの2種類を解説します。

まずはjQueryを使用するのでjQuery本体を読み込みましょう。

jQueryを使ったことがない人はこちらの記事を参照下さい。

タブ切り替えメニュー（アニメーションなし）

まずはアニメーションのないシンプルなタブ切り替えメニューを見てみます。

See the Pen
by junpei (@junpei-sugiyama)
on CodePen.

これは、

選択されているタブは色付
最初のコンテンツは表示
タブのクリックでコンテンツ切り替え

というシンプルな物です。

それではコードを見てみます。

<div class="tab">
  <ul class="tab-list">
    <li class="tab-menu js-tab current">タブ1</li>
    <li class="tab-menu js-tab">タブ2</li>
    <li class="tab-menu js-tab">タブ3</li>
  </ul>
  <div class="content-group">
    <div class="content-box js-content">
      <img src="画像URL" alt=""/>
    </div>
    <div class="content-box js-content">
      <img src="画像URL" alt=""/>
    </div>
    <div class="content-box js-content">
      <img src="画像URL" alt=""/>
    </div>
  </div>
</div>

出来るだけシンプルにしました。もちろん画像じゃなくてもOKです。

見たままですが、タブ1から3の.tab-menuがタブとなり、.content-boxがタブをクリックしたら表示されるコンテンツ部分となります。

ここの注意点はタブ1に.currentが付いている所です。

これは選択されているタブを表し、最初はタブ1が選択されているという事になります。

CSSについては特に変わった所はありませんが、1点補足すると以下のコードでコンテンツ部分は非表示にしています。

.content-box {
  display: none;
}

ただこれでは全てのコンテンツが非表示となってしまうので、jQueryを使って1番目のコンテンツだけ表示させます。

それではjQueryのコードを見てみます。

// タブメニュー
$(function () {
  $(".js-content:first-of-type").css("display", "block");
  $(".js-tab").on("click", function () {
    $(".current").removeClass("current");
    $(this).addClass("current");
    const index = $(this).index();
    $(".js-content").hide().eq(index).fadeIn(300);
  });
});

それでは1つずつイベントやメソッドの意味を見てみます。

css()

.css( プロパティ, 値 )という形でCSSのプロパティを指定

on(click)

"クリックしたら処理を行う"というクリックイベント

removeClass()

()内に外したいclass名を指定

addClass()

()内に付与したいclass名を指定

addClass()

()内に付与したいclass名を指定

index()

特定の要素のインデックス番号を取得（クリックされた要素が何番目か取得）

hide()

表示されている要素を非表示にする

eq()

順番指定して要素を取得

fadeIn()

要素をゆっくり表示させる
()内に数字を入れるとアニメーションの時間を指定できる（単位ミリ秒）

これらを先ほどのコードに当てはめると以下のようになります。

// タブメニュー
$(function () {
  // 最初のコンテンツは表示
  $(".js-content:first-of-type").css("display", "block");
  // タブをクリックすると
  $(".js-tab").on("click", function () {
    // 現在選択されているタブからcurrentを外す
    $(".current").removeClass("current");
    // クリックされたタブにcurrentクラスを付与
    $(this).addClass("current");
    // クリックされた要素が何番目か取得（クリックしたタブのインデックス番号を取得）
    const index = $(this).index();
    // コンテンツを非表示にして、クリックしたタブのインデックス番号と同じコンテンツを表示
    $(".js-content").hide().eq(index).fadeIn(300);
  });
});

最後が少し分かりにくいですが、const index = $(this).index();でクリックされたタブが2番目だった場合、 $(".js-content").hide().eq(index).fadeIn(300);では、