【jQuery】タブの切り替えメニューを実装する方法｜複数箇所の場合も

今回はWebサイトに、タブメニューを切り替えてコンテンツの内容を変更する機能を実装する例となります。

例では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（CSSで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の値を、addClassメソッド・removeClassメソッドで追加・削除します。そのことにより、タブをクリックして切り替えた際に、コンテンツの内容を変更します。

以下、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を追加します。

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

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

ページ内に、タブを切り替え機能を複数箇所に設置する場合、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のみで実装する方法については、以下のリンク先を参考にしてみてください。

【JavaScript】タブ切り替えメニューを実装する方法｜複数箇所の場合も