などの疑問や悩みを解決してまいります。
タブ切替の機能を実装することで、Webページ上に多くのコンテンツがある場合でもユーザーは必要な情報をすぐに表示させることができます。
またコンテンツが多い場合ページの内容がごちゃつく印象がありますが、タブ切替の機能を実装することでそのセクション内に複数のコンテンツを収めることができるので、スッキリした印象にすることができます。
今回はjQueryを用いてタブ切替機能の実装方法をわかりやすく解説していきます。
本記事の目次
まずは完成例を見てみましょう
それではいつものようにまずは完成例から見ていきましょう。
See the Pen タブ切替 by koutarou mori (@koutarou-mori) on CodePen.
いかがでしょうか。
今回は『すべて』『tab01』『tab02』『tab03』のボタンを用意して、『すべて』をクリックすると条件関係なくすべての内容を表示させます。
『tab01』をクリックするとtab01の内容のみ表示、『tab02』『tab03』も同様の動きになります。
それではこちらのタブ切替機能を実装しているコードの内容を解説していきます。
HTMLコードの解説
今回使用しているHTMLコードは以下になります。
<div class="inner">
<ul class="tabBtn">
<li id="tabAll" class="selected">すべて</li>
<li id="tab01">tab01</li>
<li id="tab02">tab02</li>
<li id="tab03">tab03</li>
</ul><!-- /.tabBox -->
<ul class="tabContents">
<li class="tab01"><a href="#">tab01</a></li>
<li class="tab01"><a href="#">tab01</a></li>
<li class="tab02"><a href="#">tab02</a></li>
<li class="tab02"><a href="#">tab02</a></li>
<li class="tab03"><a href="#">tab03</a></li>
<li class="tab03"><a href="#">tab03</a></li>
</ul>
</div><!-- /.inner -->タブボタンの実装
まずタブ切替を行うためのボタンが必要ですので、タブボタンを作成しています。
ボタンを作成しているコードは以下の部分です。
<ul class="tabBtn">
<li id="tabAll" class="selected">すべて</li>
<li id="tab01">tab01</li>
<li id="tab02">tab02</li>
<li id="tab03">tab03</li>
</ul><!-- /.tabBox -->今回は『すべて』『tab01』『tab02』『tab03』の4つのボタンを用意しています。
選択されているボタンにはselectedクラスを指定しています。
このクラスが指定されているボタンは青文字と下線が引かれるようにします。
後程解説しますが、クリックされたタブボタンにselectedクラスが追加され、元々指定されていたselectedクラスは削除するような動きを、jQueryを使って実装しています。
最初は『すべて』のボタンを選択されている状態を作りたいので、『すべて』のボタンのHTMLコードにselectedクラスを指定しています。
またタブボタンそれぞれにid属性を指定しています。
こちらも後程解説しますが、『このid属性がクリックされたら、このクラスを持つ要素を表示させる』という動きをjQueryを使って実装していきます。
表示させる内容を実装
表示させる内容を作成しているコードは以下になります。
<ul class="tabContents">
<li class="tab01"><a href="#">tab01</a></li>
<li class="tab01"><a href="#">tab01</a></li>
<li class="tab02"><a href="#">tab02</a></li>
<li class="tab02"><a href="#">tab02</a></li>
<li class="tab03"><a href="#">tab03</a></li>
<li class="tab03"><a href="#">tab03</a></li>
</ul>tabContentsクラス内に表示させる内容を作成しています。
liタグにそれぞれ表示、非表示させるためのクラスを指定しています。
例えばtab01タブがクリックされたときは、tab01クラスが指定されているliタグのみを表示させるといった動きをjQueryを使って実装していきます。
CSSコードの解説
今回使用しているCSSコードは以下になります。
/* リセットCSS */
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
/* レイアウトCSS */
.inner {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 40px 15px 0;
}
.tabBtn {
display: flex;
justify-content: space-between;
align-items: center;
}
.tabBtn li {
position: relative;
width: 25%;
text-align: center;
padding-bottom: 10px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
/* タブ選択時のCSS */
.tabBtn li.selected {
color: blue;
}
.tabBtn li.selected::before {
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: blue;
}
.tabContents {
border-top: 1px solid #eee;
}
.tabContents a {
display: block;
border-bottom: 1px solid #eee;
padding: 20px;
}基本的にレイアウトを整えるためにCSSコードを記述しています。
今回は最低限のレイアウトを作成していますので、このコードをコピペしてもらってサイトデザインに合わせて自分でカスタマイズしてください。
jQueryコードの解説
今回使用しているjQueryコードは以下になります。
$(function() {
// 『すべて』が選択されたとき…
$('#tabAll').on('click', function() {
$(this).addClass('selected');
$('#tab01,#tab02,#tab03').removeClass('selected');
$('.tabContents li').show();
})
// 『tab01』が選択されたとき…
$('#tab01').on('click', function() {
$(this).addClass('selected');
$('#tabAll,#tab02,#tab03').removeClass('selected');
$('.tab01').show();
$('.tabContents li').not('.tab01').hide();
})
// 『tab02』が選択されたとき…
$('#tab02').on('click', function() {
$(this).addClass('selected');
$('#tabAll,#tab01,#tab03').removeClass('selected');
$('.tab02').show();
$('.tabContents li').not('.tab02').hide();
})
// 『tab03』が選択されたとき…
$('#tab03').on('click', function() {
$(this).addClass('selected');
$('#tabAll,#tab01,#tab02').removeClass('selected');
$('.tab03').show();
$('.tabContents li').not('.tab03').hide();
})
})タブボタンがクリックされたときの動きを実装
例えば『すべて』がクリックされたときの動きは以下のコードで実装しています。
// 『すべて』が選択されたとき…
$('#tabAll').on('click', function() {
$(this).addClass('selected');
$('#tab01,#tab02,#tab03').removeClass('selected');
$('.tabContents li').show();
})$('#tabAll').on('click', function() { は『クリックしたら○○をする』という記述
今回『すべて』のタブボタンのid属性にはtabAllを指定しています。
なのでこの記述では、#tabAllをクリックしたら○○をする、といった処理ができるようになります。
$(this).addClass('selected'); は『クリックした要素に○○クラスを付与する』という記述
$(this)とは、『○○されたら』の○○を指します。
今回でいうと○○がクリックされたらの○○を指すので、#tabAllに対してということになります。
そしてaddClass()はクラスを付与する関数になりますので、引数に付与したいクラス名を記述します。
今回の完成例ではselectedクラスをクリックされたあとのレイアウト用に指定していますので、こちらを引数の中に記述してあげます。
addClass()関数の引数の中にクラス名を記述する場合は、先頭の「.」は不要です。$('#tab01,#tab02,#tab03').removeClass('selected'); は『○○要素の○○クラスを削除』する記述
先程解説したaddClass()関数はクラスを付与することができる関数でしたが、このremoveClass()関数は指定した要素のクラスを削除する関数です。
今回は『すべて』のタブがクリックされたら、『すべて』以外のどれかのタブボタンに指定されているselectedクラスを削除したいので#tab01,#tab02,#tab03に対してremoveClass(’selected’)を指定しています。
selectedクラスがタブボタンに付与されたまま元に戻せなくなります！$('.tabContents li').show();は『○○を表示』する記述
この記述ではタブボタンをクリックしたら、○○を表示させるという内容になります。
『○○を表示』させるという処理を行うためにshow()関数を使用しています。
『すべて』のタブボタンでは表示させる内容をすべて表示させたいので、表示させるすべての要素（.tabContents li）に対してshow()関数を指定して要素を表示させています。
$('.tabContents li').not('.tab01').hide();は『○○のうち○○以外を非表示』にする記述
『すべて』のタブボタンでは、要素をすべて表示させるため非表示にする必要がありませんでした。
しかし、『tab01』『tab02』『tab03』のタブボタンいずれかがクリックされた場合は、決めた内容のみを表示するよう処理しています。
例えば『tab01』がクリックされた場合は、tab01の内容のみを表示して、それ以外の要素は非表示にしています。
このときに非表示にする関数がhide()関数です。
まず.tabContents liを非表示にする指定をして、その中でtab01クラスだけは表示させたいのでnot()関数の引数にtab01クラスを指定しています。
こうすることで.tabContents liを非表示にするが、そのうちtab01クラス以外を非表示するという処理ができます。
この記述を用いてタブごとに表示させる内容を切り替えることができます。
本記事のまとめ
ここまで読んでいただきありがとうございました。
本記事のまとめです。
ポイント
- タブ切替の機能を実装することで、Webページ上に多くのコンテンツがある場合でもユーザーは必要な情報をすぐに表示させることができる
- タブ切替の機能を実装することでそのセクション内に複数のコンテンツを収めることができるので、スッキリした印象にすることができる
$('#tabAll').on('click', function() {は『クリックしたら○○をする』という記述$(this).addClass('selected');は『クリックした要素に○○クラスを付与する』という記述$('#tab01,#tab02,#tab03').removeClass('selected');は『○○要素の○○クラスを削除』する記述$('.tabContents li').not('.tab01').hide();は『○○のうち○○以外を非表示』にする記述
