jQuery Web制作 コーディング

【コピペOK!】jQueryを使ったタブで切り替え出来るメニューの作り方

タブで切り替えるメニューってどうやって作るの?

今回はこんな疑問にお答えします。

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

タブ切り替えメニュー(シンプル版)

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

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


これは、

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

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

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

<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);では、

  • (".js-content")→コンテンツを
  • .hide()→非表示にして
  • .eq(index)→クリックされたタブと同じ2番目のコンテンツを
  • .fadeIn(300)→300ミリ秒かけて表示させる

という意味になります。

 

タブにアニメーションを使ったタブ切り替えメニュー

先ほどはシンプルな物だったので、ちょっとタブにアニメーションを付けてみたいと思います。

See the Pen
タブメニュー(アニメーション)
by junpei (@junpei-sugiyama)
on CodePen.


今回は以下のようにしてみました。

  • hoverでタブを少し透過
  • クリックで高さ変化
  • クリックで背景、テキスト、矢印の色変化
  • クリックで矢印の向き変化
  • コンテンツの切り替えを少しゆっくり

htmlとjQueryは先ほどと同じです。

cssについてはかなり変わっていますが、このタブのアニメーションがよく使うタイプという訳でもないので、コードを説明は省きます(上記のcssをクリックすればコードが見れます)

以上になります。

-jQuery, Web制作, コーディング