【jQuery・CSS】タブの切り替えメニューを実装する方法｜複数箇所の場合も
今回はjQuery・CSSで、タブメニューを切り替えてコンテンツの内容を変更する機能を実装する例となります。
【jQuery・CSS】タブの切り替えメニューを実装する例
以下の例では、「Tab-A」「Tab-B」「Tab-C」のいずれかを選択して変更すると、その下のコンテンツの内容も変更します。
See the Pen Tab Switching jQuery by yic666kr (@yic666kr) on CodePen.
HTMLの簡単な説明
HTMLのマークアップの簡単な説明となります。
以下の箇所では、タブとタブを切り替えて表示するコンテンツの要素を、それぞれ3つ作成しています。
デフォルトでは、現在のタブがclassにis-activeをもつ「Tab-A」となり、コンテンツの要素は「Content-A」を表示しています。
「Content-A」の要素は、classをis-show（CSSでdisplay:block;を指定）にして表示させ、その他のコンテンツの要素は、display:none;を指定して非表示としています。
<!--タブ-->
<ul class="tab-group">
<li class="tab is-active">Tab-A</li>
<li class="tab">Tab-B</li>
<li class="tab">Tab-C</li>
</ul>
<!--タブを切り替えて表示するコンテンツ-->
<div class="panel-group">
<div class="panel is-show">Content-A</div>
<div class="panel">Content-B</div>
<div class="panel">Content-C</div>
</div>
jQueryの簡単な説明
jQueryの簡単な説明となります。
以下のコードではタブをクリックすると関数を実行します。関数内では、タブ・コンテンツのそれぞれのclassの値を、addClassメソッド・removeClassメソッドで追加・削除します。それより、タブ・コンテンツを切り替えています。
jQuery(function($){
$('.tab').click(function(){
$('.is-active').removeClass('is-active');
$(this).addClass('is-active');
$('.is-show').removeClass('is-show');
// クリックしたタブからインデックス番号を取得
const index = $(this).index();
// クリックしたタブと同じインデックス番号をもつコンテンツを表示
$('.panel').eq(index).addClass('is-show');
});
});タブの切り替え
関数内では、まず、いずれかのタブが持つclassの値is-activeを削除します。そして、クリックしたタブに対してclassの値is-activeを追加することで、タブの色を変更しています。
クリックしたタブと同じインデックス番号のコンテンツを表示
次に、コンテンツ（classにpanelの値をもつ要素）の中で、classの値is-show（display:block;を適用）をもつ要素に対し、is-showの値を削除し非表示とします。
そして、クリックしたタブからindexメソッドでインデックス番号を取得し、その番号を引数としたeqメソッドを利用して、指定したコンテンツに対しclassの値is-showを追加します。
それにより、クリックしたタブのインデックス番号と同じインデックス番号のコンテンツが表示しています。
タブの切り替えを複数箇所に実装する場合
ページ内に、タブを切り替え機能を複数箇所に設置する場合、HTMLとjQueryを次のように変更します。
HTMLの例は以下となり、連動させたいタブとコンテンツごとに要素で囲みます。（以下の例では<div class="group"></div>で囲んでいます。）
<div class="group">
<ul class="tab-group">
<li class="tab is-active">Tab-A</li>
<li class="tab">Tab-B</li>
<li class="tab">Tab-C</li>
</ul>
<div class="panel-group">
<div class="panel is-show">Content-A</div>
<div class="panel">Content-B</div>
<div class="panel">Content-C</div>
</div>
</div>jQueryの例は以下となり、追加したdivのclassの値をparentsメソッドの引数に利用し、CSSを変更する範囲を制限しています。
jQuery(function($){
$('.tab').click(function(){
// クリックした要素の先祖要素の中で、classの値がgroupの要素を取得
const group = $(this).parents('.group');
group.find('.is-active').removeClass('is-active');
$(this).addClass('is-active');
group.find('.is-show').removeClass('is-show');
// クリックしたタブからインデックス番号を取得
const index = $(this).index();
// クリックしたタブと同じインデックス番号をもつコンテンツを表示
group.find(".panel").eq(index).addClass('is-show');
});
});JavaScriptのみでタブの切り替えを実装する場合
タブ切り替えをJavaScriptのみで実装する方法については、以下のリンク先を参考にしてみてください。
