[jQuery]プラグインなしでタブメニュー
画像を多く表示させたい場合にカルーセル（スライドショー）を使いますが、他にも同じページでコンテンツを複数表示させたい時にはタブメニューも有効です。Bootstrapやプラグインなどでも多彩なタブメニューが実装できるのですが、今回はプラグインを使わずにjQueryを書いて実装できるタブメニューを作ってみました。
タブメニューって？
ブラウザのタブのようにクリックすると、画面が切り替わるものをさします。
ナビゲーションにも使われていたりしますが、興味のあるコンテンツをクリックして表示させる時に使われているのを見かけます。
プラグインで実装されているものが多いですが、今回はスクリプトだけでタブメニューを実装します。
実装手順
実装手順は以下です。
- jQueryを用意
- マークアップ
- 大まかに見た目を決める
- スクリプト
- 見た目をさらに整える
実際に作ってみよう
手順を追って作っていきます。
またスクリプトについては、どのように動かすのかの説明を追加します。
1.jQueryを用意する
実装の前段階として、文書構造にjQueryを忘れずに埋め込みます。
今回はCDNを使います。</body>の直上にでも置いておきましょう。
1 | <script src="//cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script> |
2.文書構造を書く
まず、タブの部分をマークアップします。
1 2 3 4 5 | <ul class="tab"> <li class="active">TAB 1</li> <li>TAB 2</li> <li>TAB 3</li> </ul> |
クリックした時にそのタブが表示されるように.activeクラスをつけておきます。
続いてコンテンツ部分を書きます。
1 2 3 | <div class="tabContent active">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち</div> <div class="tabContent">木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。</div> <div class="tabContent">恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。</div> |
ここも<ul>と<li>で書いてもいいと思いますが、今回は<div>で構造を書いています。
ここにもアタマのコンテンツに.activeクラスをつけておきます。
完成した文書構造は以下です。
1 2 3 4 5 6 7 8 9 | <ul class="tab"> <li class="active">TAB 1</li> <li>TAB 2</li> <li>TAB 3</li> </ul> <div class="tabContent active">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち</div> <div class="tabContent">木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。</div> <div class="tabContent">恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。</div> |
3.大まかな見た目を決める
CSSで大体の見た目を作っておきます。CSSリセットもかけておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | * { margin: 0; padding: 0; } .tab { list-style: none; } .tab li { display: inline-block; color: #999; background-color: #ddd; padding: 10px 20px; cursor: pointer; } .tab li:hover { color: #f00; background-color: #999; } .tab li.active { color: #fff; background-color: #999; } .tabContent { display: none; width: 300px; padding: 20px; border: 3px solid #999; } .active { display: block; } |
タブ自体を display: inline-block; で横並びにしておきます。また、.activeクラスがついたコンテンツだけ見えるように、元々のコンテンツ部分には display: none; をかけておきます。
ここまでの全体像はこちら。
See the Pen Simple Tab(stub) by necomacustom (@tamayura) on CodePen.27739
これだけですとタブをクリックしても全く動かないので、ここでスクリプトを書いていきます。
4.スクリプトを書く – jQuery
クリックした場所に合わせて.activeクラスを付け替えて表示/非表示を制御する、という内容です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(function() { $(".tab li").click(function() { //タブをクリックしたときのファンクションをまとめて指定 var num = $(".tab li").index(this); //.index()を使いクリックされたタブが何番目かを調べ、numという変数に代入 $(".tabContent").removeClass('active'); //コンテンツを一度すべて非表示 $(".tabContent").eq(num).addClass('active'); //クリックされたタブと同じ順番のコンテンツを.activeをクラスに追加して表示 $(".tab li").removeClass('active'); //一度タブについているクラス.activeを消して $(this).addClass('active') //クリックされたタブのみにクラス.activeをつける }); }); |
すみません、途中で面倒になって、コードの中に書いてしまいました…
一番最初の $(function() { }); はjQueryのおまじない的な感じで書いていくのですが…元々 jQuery(document).ready(function() { }); という処理を始める書き出しを略しています。
そして、この $(function() { }); 内の『{ }』の中に処理を書いていきます。
マークアップした時に書いていますが、".tab li" はタブ部分、".tabContent" はコンテンツ部分に付けられたクラス名です。これらをjQueryで操作します。
2行目
$(“.tab li”).click(function() { は、タブ（.tab li）をクリックした時に『{ }』内に書かれた内容を動かす為に書きます（.click(function(){ });）。
13行目にあるように、『});』で閉じれば処理が終わります。最初からjQueryを書く場合は必ず$(“honyarara”).click(function() { });といった感じで始めに閉じておき、『{ }』内に処理内容を書いていきます。
3行目
.tab li 要素がクリックされたときに、それが何番目の要素かをjQueryを使って調べます。
その時に使われるのが index(this) です。正確にはindexメソッドと言います。
詳細は避けますが、当てはまる要素に対して0から始まる値を返していきます。反対に当てはまる要素がない時には-1の値を返します。
indexメソッドで返ってきた値を今回は’num‘という変数に代入します。変数は…中学校の時に習った、方程式に使われるxやyのことですね。
5行目
タブをクリックした時に、コンテンツ部分（.tabContent）についていた .active クラスを一旦取り除きます（.removeClass()）。
これはどういうことかと言いますと、CSSで書いたコンテンツ部分は display: none; で非表示にしてあり、クラス .active をつけることにより表示させているので、この処理を忘れると、前にクリックしたコンテンツ部分が表示されたままになります。これは実際にコードを一旦書いてみて、この部分をコメントアウトしてみると確認できます。
7行目
3行目でindexメソッドを使って、クリックしたタブが何番目かを調べて変数’num’にその値を代入しました。
クリックしたタブと同じ順番（eq(num)）にあるコンテンツ部分にクラス .active をつけて（.addClass(.active)）表示させる、という意味になります。
試しにここの’num’に『1』を代入すると、2番目のコンテンツが表示されます。
9行目
元々1つ目のタブについていたクラス名 .activeを取り除きます。
この処理も5行目と同じで、この処理を書かずに置くとクリックしたすべてのタブにクラス .active がつけられて、どのタブも色が変わったまま（CSSで .tab li.active を指定していますね）になってしまいます。
11行目
最後に $(this) というのが出てきました…これは「イベントが発生した要素」を指します。
このタブメニューの場合は、複数の同じ要素（ここでは.tab li）のうち、クリックした要素を指しています。
クリックしたタブにクラス .active を追加して（.addClass(.active)）タブの背景色を変えています。
これで、タブをクリックするとコンテンツ部分も変わるはず、です。
5.さらに見た目を整える
これでも十分タブメニューなのですが、もう少し変えてそれっぽくしていきます。
See the Pen Simple Tab1 by necomacustom (@tamayura) on CodePen.
他にもいろいろ変えていけば、ユーザーの興味を引くタブメニューになると思います。
今回は以上です、お疲れ様でした！
基礎中の基礎のような、タブメニューでした。
最近は記録として残してくれる方が多くなったおかげと、コピペでも十分使えるプラグインとしてたくさん出回るようにもなって、本当に時代の流れを感じています。
フロントエンドはJavaScriptの歴史といっても過言ではないようで、新しいことがどんどん出てきてどんどん廃れていくというめまぐるしい分野ですが、時代に振り回されつつも基礎もしっかり固めておきたいですね。ねこま（@necomacustom）でした。