【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】タブの切り替えをシンプル・簡単に実装する方法

参考サイトなど

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

コメント欄

poki poki様

2019-04-30

こちらの「タブの切り替えをシンプル・簡単に実装する方法」を参考にさせて頂きました。１ページ内の複数箇所にこのタブ切り替えを設置したいのですが、どこに手を入れると正常に動作するようになるでしょうか？（内容は設置箇所ごとに異なります）現状ではタブ切り替えＡ群を操作するとタブ切り替えＢ群の内容が正常に動作しなくなってしまいます。（先にタブ切り替えＢ群を操作した場合はその逆）お忙しい事とは思いますが、御回答頂ければ幸いです。（初歩的な質問で申し訳ないです）
1. 当記事執筆者
  
  2019-05-01
  コメントありがとうございます。CSSはそのままで、HTMLとjQueryを次のように変更した例ではどうでしょうか。
  
  HTMLでは連動させたいタブとコンテンツごとに要素で囲みます。（以下の例では<div class="group">で囲む）
```
<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では、上記HTMLで追加したdivを利用し、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');
    });
});
```
poki poki様

2019-05-01

素早い御回答、ありがとうございます。追加頂いた html と jQuery への変更を加えることで、それぞれのタブ切り替え群が正常に動作するようになりました。これで、１ページ内に何箇所でもこちらのタブ切り替えを設置できそうです。お時間を割いて頂き、ありがとうございました。
yasu様

2019-10-04

こちらの「タブの切り替えをシンプル・簡単に実装する方法」を参考にさせて頂きました。１つご質問なのですが、別ページからリンクした際にタブごとに表示することが出来ませんでした。ダイレクトリンクを実装する方法があるのでしょうか？
1. 当記事執筆者
  
  2019-10-04
  
  yasu様
  コメントありがとうございます。
  「別ページからリンクした際にタブごとに表示」とは、
  具体的にはどのような状況のことでしょうか？

コメント投稿またはTwitterで返信コメントをキャンセル