jQuery タブメニュー（複数タブグループ対応）

タブメニューのjQueryサンプルです。
同じページにタブメニューが複数ある場合の対応済です。

CSS

.tab__list {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
}
.tab__item {
	display: block;
	cursor: pointer;
}
.tab__item.is-active {
	color: red;
}
.tab-content {
	display: none;
	opacity: 0; /* ふわっと表示させる場合 */
}
.tab-content.is-active {
	display: block;
	animation-name: displayContent; /* ふわっと表示させる場合 */
	animation-duration: 1s; /* ふわっと表示させる場合 */
	animation-fill-mode: forwards; /* ふわっと表示させる場合 */
}

@keyframes displayContent { /* ふわっと表示させる場合 */
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

はじめからタブとコンテンツにアクティブ用のクラス（is-active）を付与する ver.

HTML

<div class="tab">
	<ul class="tab__list">
		<li class="tab__item is-active">タブ1</li>
		<li class="tab__item">タブ2</li>
		<li class="tab__item">タブ3</li>
	</ul>
	<div class="tab-content is-active">
		<p>タブ1のコンテンツ</p>
	</div>
	<div class="tab-content">
		<p>タブ2のコンテンツ</p>
	</div>
	<div class="tab-content">
		<p>タブ3のコンテンツ</p>
	</div>
</div>

<div class="tab">
	<ul class="tab__list">
		<li class="tab__item is-active">タブ4</li>
		<li class="tab__item">タブ5</li>
		<li class="tab__item">タブ6</li>
	</ul>
	<div class="tab-content is-active">
		<p>タブ4のコンテンツ</p>
	</div>
	<div class="tab-content">
		<p>タブ5のコンテンツ</p>
	</div>
	<div class="tab-content">
		<p>タブ6のコンテンツ</p>
	</div>
</div>

jQuery

$(function(){

	$('.js-tab-item').on('click', function() {
		var tab = $(this).parents('.js-tab');
		var tabItem = tab.find('.js-tab-item');
		var tabContent = tab.find('.js-tab-content');
		tabItem.removeClass('is-active');
		$(this).addClass('is-active');
		var elmIndex = tabItem.index(this);
		tabContent.removeClass('is-active');
		tabContent.eq(elmIndex).addClass('is-active');
	});

});

自動で最初のアイテムにアクティブ用のクラス（is-active）を付与する ver.

HTML

<div class="tab">
	<ul class="tab__list">
		<li class="tab__item">タブ1</li>
		<li class="tab__item">タブ2</li>
		<li class="tab__item">タブ3</li>
	</ul>
	<div class="tab-content">
		<p>タブ1のコンテンツ</p>
	</div>
	<div class="tab-content">
		<p>タブ2のコンテンツ</p>
	</div>
	<div class="tab-content">
		<p>タブ3のコンテンツ</p>
	</div>
</div>

<div class="tab">
	<ul class="tab__list">
		<li class="tab__item">タブ4</li>
		<li class="tab__item">タブ5</li>
		<li class="tab__item">タブ6</li>
	</ul>
	<div class="tab-content">
		<p>タブ4のコンテンツ</p>
	</div>
	<div class="tab-content">
		<p>タブ5のコンテンツ</p>
	</div>
	<div class="tab-content">
		<p>タブ6のコンテンツ</p>
	</div>
</div>

jQuery

$(function(){

	$('.js-tab-item').on('click', function() {
		var tab = $(this).parents('.js-tab');
		var tabItem = tab.find('.js-tab-item');
		var tabContent = tab.find('.js-tab-content');
		tabItem.removeClass('is-active');
		$(this).addClass('is-active');
		var elmIndex = tabItem.index(this);
		tabContent.removeClass('is-active');
		tabContent.eq(elmIndex).addClass('is-active');
	});
});

// jquery ver.3移行は $(function(){}); の外に記述
$(window).on('load', function() {
	$('.js-tab-item:first-of-type').addClass('is-active');
	$('.js-tab-content:first-of-type').addClass('is-active');
});
</script>