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

今回は、タブを切り替えることにより、コンテンツの内容を変更するjQueryのソースコードの例となります。

例では、jQueryのeachメソッドを使いシンプル・簡単に実装します。

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

以下がjQueryを利用したソースコードの例となります。

「Tab-A」「Tab-B」「Tab-C」をそれぞれクリックすると、その下のコンテンツの内容が変更します。

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

ソースコードの説明

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

HTMLのマークアップ

<ul class="tab-list">
	<!--タブ-->
	<li class="tab is-active">Tab-A</li>
	<li class="tab">Tab-B</li>
	<li class="tab">Tab-C</li>
</ul>
<div class="main">
	<!--タブを切り替えて表示するコンテンツ-->
	<div class="content is-show">Content-A</div>
	<div class="content">Content-B</div>
	<div class="content">Content-C</div>
</div>

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

デフォルトでは、現在のタブが「Tab-A」のタブとなり、classにis-activeを指定しています。

そして、そのタブのコンテンツとして、classにis-show（display:block;）を指定し、「Content-A」を表示しています。その他のコンテンツは、display:none;で非表示にしてあります。

jQueryのソースコード

jQuery(function($){
	$('.tab').click(function(){
		$('.tab.is-active').removeClass('is-active');
		$(this).addClass('is-active');
		$(".content.is-show").removeClass('is-show');
        // クリックしたタブからインデックス番号を取得
		const index = $(this).index();
        // クリックしたタブと同じインデックス番号をもつコンテンツを表示
		$(".content").eq(index).addClass('is-show');
	});
});

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

タブの切り替え

まず、いずれかのタブ（classにtabの値をもつ要素）をクリックすると、classの値is-activeをもつタブに対し、is-activeの値を削除します。その後、クリックしたタブに対して、classの値is-activeを追加します。そのことにより、現在のタブにis-activeのCSSが適用されます。

切り替えたタブと同じインデックス番号のコンテンツを表示

次に、コンテンツ（classにcontentの値をもつ要素）では、display:block;が指定してあるclassの値is-showをもつコンテンツに対し、is-showの値を削除し非表示とします。

そして、クリックしたタブから、indexメソッドを使用し、インデックス番号を取得します。

最後に、その番号を引数としたeqメソッドを使い、指定したコンテンツに、classの値のis-showを追加します。そのことにより、クリックしたタブのインデックス番号と同じインデックス番号のコンテンツが表示されます。