【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を追加します。そのことにより、クリックしたタブのインデックス番号と同じインデックス番号のコンテンツが表示されます。

参考サイトなど

コメント欄

  1. poki poki様

    こちらの「 タブの切り替えをシンプル・簡単に実装する方法 」を参考にさせて頂きました。 1ページ内の複数箇所にこのタブ切り替えを設置したいのですが、どこに手を入れると正常に動作するようになるでしょうか? ( 内容は設置箇所ごとに異なります ) 現状ではタブ切り替えA群を操作するとタブ切り替えB群の内容が正常に動作しなくなってしまいます。 ( 先にタブ切り替えB群を操作した場合はその逆 ) お忙しい事とは思いますが、御回答頂ければ幸いです。 ( 初歩的な質問で申し訳ないです )

    1. 当記事執筆者

      コメントありがとうございます。CSSはそのままで、HTMLとjQueryを次のように変更した例ではどうでしょうか。

      HTMLでは連動させたいタブとコンテンツごとに要素で囲みます。(以下の例では<div class="group">で囲む)

      <div class="group">
      <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>
      </div>

      jQueryでは、上記HTMLで追加したdivを利用し、CSSを変更する範囲を制限しています。

      jQuery(function($){
          $('.tab').click(function(){
              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(".content").eq(index).addClass('is-show');
          });
      });
  2. poki poki様

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

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。