jQuery Web制作

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

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

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

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

 

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

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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でタブ切り替え出来るメニューの作り方を解説しました。

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

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-jQuery, Web制作