複数設置に対応したタブ切り替えをjqueryで実装しよう

こんにちは！カスミです。

さて、以下のようなお悩みをお持ちでしょうか？

jqueryを使ってタブ切り替えを実装したが、それを複数設置した時、挙動がおかしくなる。。
たとえば複数設置したタブ切り替えが、二つ以上あった時、一つのタブ切り替えのみ動作させたいのに、もう一つのタブ切り替えも動作してしまう等。

このような疑問に回答します。

本記事では、タブ切り替えの複数設置に対応したコードを、codepenを使って実装デモを用意し、それについて解説していきます。

複数のタブ切り替えに対応したものがこちら。

See the Pen タブ切り替え　複数 by Kohei (@kouk05) on CodePen.dark

上記が複数のタブ切り替えに対応したデモになります。

デモでは、タブ切り替えを二つ用意しております。

片方のタブ切り替えを動作させても、もう片方のタブ切り替えは動作しないようになってます。

次章より、詳しい解説をしていきます。

タブ切り替え用にhtml・CSSを用意

まずはタブ切り替え用に、html、cssを用意しよう。

以下コード例です。

html

<div class="tabgroup tabgroup01">
<p>タブ切り替え０１</p>
<ul class="tabnav">
	<li class="active"><a href="#tab1">タブ1ボタン</a></li>
	<li><a href="#tab2">タブ2ボタン</a></li>
</ul>
<div class="tabcontent">
	<div class="tabcontent_list show">タブ1の内容</div>
	<div class="tabcontent_list">タブ2の内容</div>
</div>
</div>

<div class="tabgroup tabgroup02">
  <p>タブ切り替え０２</p>
<ul class="tabnav">
	<li class="active"><a href="#tab1">タブ1ボタン</a></li>
	<li><a href="#tab2">タブ2ボタン</a></li>
</ul>
<div class="tabcontent">
	<div class="tabcontent_list show">タブ1の内容</div>
	<div class="tabcontent_list">タブ2の内容</div>
</div>
</div>

ここで重要なのが、用意するタブ切り替え事にグループ分けをして下さい。

例では、class、tabgroupで分けてます。

CSS

.tabgroup {
  width: 90%;
  margin: auto;
  margin-bottom: 30px;
}
.tabnav{
  margin: auto;
  display: flex;
}
.tabnav li{
  width: 50%;
	display: block;
  box-sizing: border-box;
}
.tabnav li a{
	display: block;
  width: 100%;
	background: #405dca;
	color: #fff;
	text-decoration: none;
}
.tabnav li.active a{ 
	background: #ddd;
	color: #333;
}
.tabcontent{
	padding: 20px;
	border: 1px dotted #ccc;
}

.tabcontent .tabcontent_list {
  display: none;
}

.tabcontent .tabcontent_list.show {
  display: block;
}

CSSでタブ切り替えを装飾しましょう。

jqueryでタブ切り替えを動作させよう。

$(function () {
  $(".tabnav li").click(function () {
　　// クリックした要素の親要素を、groupで宣言
    const group = $(this).parents(".tabgroup");
    group.find(".active").removeClass("active");
    $(this).addClass("active");
    group.find(".show").removeClass("show");
　　// クリックしたタブからインデックス番号を取得
    const index = $(this).index();
  group.find(".tabcontent_list").eq(index).addClass("show");
  });
});

タブを切り替えるjqueryのコードになります。

複数設置にも対応したコードになります。

セレクタを任意のクラス名に変更し、script内に記述してください。

ここまでで、タブ切り替えの実装は完了しました。

複数のタブ切り替えで、誤動作する原因

複数のタブ切り替えで誤動作する原因としては、クリックしたタブの親要素判定をしていないのが原因かと思われます。

先ほど紹介したjqueryコードの中で、クリックした要素の親要素を取得し、その中で動作するよう記述されていますので、ご自身の環境に合わせて、改変し使って見てください。

まとめ

jqueryを使った、タブ切り替えの複数設置には、親要素を取得するのを忘れずにしましょう。

以上で解説を終わります。