Web制作 jQuery

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

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

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


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

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

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

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

参考記事
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説

続きを見る

 

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

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

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をクリックすればコードは見れます)

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, jQuery