タブの切り替えメニューは実務でそこまで頻繁に使うわけではありませんが、知らないと確実に困る時が来ると思うので出来るようになっておきましょう。
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
jQueryを使ったタブ切り替え出来るメニューの作り方
今回はタブの切り替えにアニメーションを入れたタブメニューと、入れないタブメニューの2種類を解説します。
まずはjQueryを使用するのでjQuery本体を読み込みましょう。
jQueryを使ったことがない人はこちらの記事を参照下さい。
【初心者向け】jQueryとは?CDNを使った本体の読み込み方も分かりやすく解説
続きを見る
タブ切り替えメニュー(アニメーションなし)
まずはアニメーションのないシンプルなタブ切り替えメニューを見てみます。
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);
では、
- (".js-content")→コンテンツを
- .hide()→非表示にして
- .eq(index)→クリックされたタブと同じ2番目のコンテンツを
- .fadeIn(300)→300ミリ秒かけて表示させる
という意味になります。
タブ切り替えメニュー(アニメーションあり)
先ほどはシンプルな物だったので、ちょっとタブにアニメーションを付けてみたいと思います。
See the Pen
タブメニュー(アニメーション) by junpei (@junpei-sugiyama)
on CodePen.
今回は以下のようにしてみました。
- hoverでタブを少し透過
- クリックで高さ変化
- クリックで背景、テキスト、矢印の色変化
- クリックで矢印の向き変化
- コンテンツの切り替えを少しゆっくり
HTMLとjQueryは先ほどと同じです。
CSSについてはかなり変わっていますが、このタブのアニメーションがよく使うタイプという訳でもないのでコードの解説は省きます(上記のCSSをクリックすればコードは見れます)
まとめ
今回はjQueryでタブ切り替え出来るメニューの作り方を解説しました。
タブメニューは実務でも非常によくある実装なので、ブクマしていつでもコピペ出来るようにしておくと便利かと思います。
以上になります。