jQuery Web制作

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

2021年7月30日

※ 当サイトではアフィリエイト広告を利用しています

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

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

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

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

まとめ

今回はjQueryでタブ切り替え出来るメニューの作り方を解説しました。

タブメニューは実務でも非常によくある実装なので、ブクマしていつでもコピペ出来るようにしておくと便利かと思います。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-jQuery, Web制作