【jQuery】タブの切り替えをシンプル・簡単に実装する方法

今回は、ウェブサイトで、タブを切り替えコンテンツの内容を変更する機能を実装する例となります。例ではjQueryを利用しシンプルで簡単に実装します。

jQueryを使用し、タブを切り替える例

以下、jQueryを利用したソースコードの例となり、「Tab-A」「Tab-B」「Tab-C」をそれぞれクリックすると、その下のコンテンツの内容が変更します。

See the Pen Tab Switching jQuery by yic666kr (@yic666kr) on CodePen.

ソースコードの説明

以下、ソースコードのポイントとなる箇所の説明です。

HTMLのマークアップ

<!--タブ-->
<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>

HTMLのソースコードでは、タブとタブを切り替えて表示するコンテンツの要素を、それぞれ3つ作成します。

デフォルトでは、現在のタブがclassにis-activeを指定してある「Tab-A」となり、コンテンツ内容は「Content-A」を表示しています。

「Content-A」の要素は、classをis-show（display:block;を指定）として表示させ、その他のコンテンツの要素は、display:none;を指定し非表示としています。

jQueryのソースコード

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');
	});
});

jQueryではタブをクリックすると、タブ・コンテンツのそれぞれのclassの値を変更します。そのことにより、タブをクリックして切り替えた際に、コンテンツの内容を変更します。

以下、jQueryの処理の流れの説明となります。

タブの切り替え

まず、いずれかのタブ（classにtabの値をもつ要素）をクリックした際に、いずれかのタブが持つclassの値is-activeを削除します。そして、クリックしたタブに対してclassの値is-activeを追加します。

そのことにより、クリックしたタブにis-activeのCSSが適用されます。

クリックしたタブと同じインデックス番号のコンテンツを表示

次に、コンテンツ（classにpanelの値をもつ要素）の中で、classの値is-show（display:block;を適用）をもつ要素に対し、is-showの値を削除し非表示とします。

そして、クリックしたタブから、indexメソッドでインデックス番号を取得し、その番号を引数としたeqメソッドを使い、指定したコンテンツに対しclassの値のis-showを追加します。

そのことにより、クリックしたタブのインデックス番号と同じインデックス番号のコンテンツが表示されます。

タブの切り替えを複数箇所に実装する場合

ページ内に、上記タブを切り替え機能を複数箇所に設置する場合は、以下のコメント欄にあるソースコードを参考にしてみてください。

JavaScriptのみでタブの切り替えを実装する場合

タブ切り替えをJavaScriptのみで実装する方法については、以下のリンク先を参考にしてみてください。

【JavaScript】タブの切り替えをシンプル・簡単に実装する方法