JS タブメニューで切り替え

2020-06-04

アコーディオンメニューと同じように、タブメニューの切り替えなどもよく使用する場面があるかと思いますが、今回はそれについて記述していきます。

タブ1
タブ2
タブ3

ここにコンテンツ1が入ります。ここにコンテンツ1が入ります。ここにコンテンツ1が入ります。ここにコンテンツ1が入ります。ここにコンテンツ1が入ります。

ここにコンテンツ2が入ります。ここにコンテンツ2が入ります。ここにコンテンツ2が入ります。ここにコンテンツ2が入ります。ここにコンテンツ2が入ります。

ここにコンテンツ3が入ります。ここにコンテンツ3が入ります。ここにコンテンツ3が入ります。ここにコンテンツ3が入ります。ここにコンテンツ3が入ります。

まず、htmlソースは下記のようになっています。

<ul class="sample-tab">
	<li class="active">タブ1</li>
	<li>タブ2</li>
	<li>タブ3</li>
</ul>
<div class="sample-ctn">
	<div class="box show">
		<p>ここにコンテンツ1が入ります。ここにコンテンツ1が入ります。ここにコンテンツ1が入ります。ここにコンテンツ1が入ります。ここにコンテンツ1が入ります。</p>
	</div>
	<div class="box">
		<p>ここにコンテンツ2が入ります。ここにコンテンツ2が入ります。ここにコンテンツ2が入ります。ここにコンテンツ2が入ります。ここにコンテンツ2が入ります。</p>
	</div>
	<div class="box">
		<p>ここにコンテンツ3が入ります。ここにコンテンツ3が入ります。ここにコンテンツ3が入ります。ここにコンテンツ3が入ります。ここにコンテンツ3が入ります。</p>
	</div>
</div>

</ul>

<p>ここにコンテンツ1が入ります。ここにコンテンツ1が入ります。ここにコンテンツ1が入ります。ここにコンテンツ1が入ります。ここにコンテンツ1が入ります。</p>

</div>

<p>ここにコンテンツ2が入ります。ここにコンテンツ2が入ります。ここにコンテンツ2が入ります。ここにコンテンツ2が入ります。ここにコンテンツ2が入ります。</p>

</div>

<p>ここにコンテンツ3が入ります。ここにコンテンツ3が入ります。ここにコンテンツ3が入ります。ここにコンテンツ3が入ります。ここにコンテンツ3が入ります。</p>

</div>

タブメニューの部分とコンテンツ部分で、最初に表示させておきたい要素にクラスを付与しておくと良いです。
今回の場合は、タブに　“active”、“show”を付与しています。

次に、CSSの記述です。

<style>
ul.sample-tab {
	font-size: 0;
	text-align: center;
}
ul.sample-tab li {
	display: inline-block;
	width: 30%;
	padding: 8px 0;
	background: #eee;
	cursol: pointer;
	color: #fff;
}
ul.sample-tab li.active{
	background: #fff;
	color: #d00;
}
.sample-ctn .box {
	display: none;
}
.sample-ctn .box.show {
	display: block;
}
</style>

<style>

ul.sample-tab {

font-size: 0;

text-align: center;

}

ul.sample-tab li {

display: inline-block;

width: 30%;

padding: 8px 0;

background: #eee;

cursol: pointer;

color: #fff;

}

ul.sample-tab li.active{

background: #fff;

color: #d00;

}

.sample-ctn .box {

display: none;

}

.sample-ctn .box.show {

display: block;

}

</style>

細かいレイアウト調整部分等は省いていますが、
14行目の li.active の指定と
18行目、２１行目の .box へのそれぞれの指定が大事になります。

最後に、スクリプト部分になります。

<script>
$(function() {
	$('.sample-tab li').on('click', function() {
		var index = $('.sample-tab li').index(this);
		$('.sample-tab li').removeClass('active');
		$(this).addClass('active');
		$('.box').removeClass('show').eq(index).addClass('show');
	});
});
</script>

$(function() {

$('.sample-tab li').on('click', function() {

var index = $('.sample-tab li').index(this);

$('.sample-tab li').removeClass('active');

$(this).addClass('active');

$('.box').removeClass('show').eq(index).addClass('show');

});

</script>

タブの部分をクリックした際に、タブメニューのクラスの操作とコンテンツ部分のクラスの操作を行っています。
index()とeq()を活用しているので、それぞれの数に増減があっても、そのまま対応することができます。

余談

タブの切り替えをフェードインにしたい場合は、7行目の部分を下記のように書き換えると対応することができます。

$('.sample-tab li').on('click', function() {
	var index = $('.sample-tab li').index(this);
	$('.sample-tab li').removeClass('active');
	$(this).addClass('active');
//	$('.box').removeClass('show').eq(index).addClass('show');	/* ここは削除 */
/*　下記を追加 */
	$('.box').hide();
	$('.box').eq(index).fadeIn();
});

$('.sample-tab li').on('click', function() {

var index = $('.sample-tab li').index(this);

$('.sample-tab li').removeClass('active');

$(this).addClass('active');

// $('.box').removeClass('show').eq(index).addClass('show'); /* ここは削除 */

/*　下記を追加 */

$('.box').hide();

$('.box').eq(index).fadeIn();

});

あとは、CSSでアニメーションを設定しておく方法などがあると思います。