【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(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のみで実装する方法については、以下のリンク先を参考にしてみてください。

参考サイトなど

コメント欄

  1. CRI様

    こんにちは。 こちらの「複数箇所にこのタブ切り替えを設置」を参考にしております。 設置はスムーズに行えたのですが、タブ内要素が多くなった際にタブグループ自体の高さを自動調整するにはどうしたらいいでしょうか。 現状、表示はされますが他の要素がしたにあった場合その要素の上にかぶってしまいます…

    1. 当記事執筆者

      コメントありがとうございます。
      タブで表示する要素に高さを指定しなければ、要素の内容に合わせた高さとなると思います。
      また、現在のタブ以外の内容は、すべてdisplay:none;を指定していると思いますが、表示される要素はどこにある要素でしょうか?

  2. neoTOKYO様

    初めまして。 今回こちらのページを元にタブページを作成することができました! 質問は他のページから、Content-Bページ(タブページのTab-Bがクリックされた)への直接リンクさせる方法はございますでしょうか? 他のページから、Content-BやContent-Cのページにリンクさせてたいため。 宜しくお願い致します。

    1. 当記事執筆者

      コメントありがとうございます。
      試してはいませんが、以下の方法でできると思います。

      タブを切り替えた際に、JSでURLに対してパラメータやアンカー付与します。
      そして、リンクをクリック時に、そのURLにアクセスします。

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。