<div class="container">
	<h1 class="text-xl">タブ切り替え(複数タブコンテンツ対応)</h1>
	<div class="js-tab-group tab-group mt-4">
		<ul class="tab-menu flex text-center">
			<li class="js-tab-menu__item tab-menu__item is-active">
				タブ1
			</li>
			<li class="js-tab-menu__item tab-menu__item">
				タブ2
			</li>
			<li class="js-tab-menu__item tab-menu__item">
				タブ3
			</li>
		</ul>
		<div class="tab-content">
			<div class="js-tab-content__item  tab-content__item is-active">
				<p>吾輩は猫である。</p>
<p>名前はまだ無い。</p>
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
<p>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
<p>この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。</p>
<p>第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。</p>
<p>その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。</p>
<p>のみならず顔の真中があまりに突起している。そうしてその穴の中から時々</p>
			</div>
			<div class="js-tab-content__item tab-content__item">
				<p>木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。</p>
<p>名高い桟も、蔦のかずらを頼みにしたような危い場処ではなくなって、徳川時代の末にはすでに渡ることのできる橋であった。新規に新規にとできた道はだんだん谷の下の方の位置へと降って来た。</p>
<p>道の狭いところには、木を伐って並べ、藤づるでからめ、それで街道の狭いのを補った。長い間にこの木曾路に起こって来た変化は、いくらかずつでも嶮岨な山坂の多いところを歩きよくした。そのかわり、大雨ごとにやって来る河水の氾濫が旅行を困難に</p>
			</div>
			<div class="js-tab-content__item tab-content__item">
				<p>恥の多い生涯を送って来ました。</p>
<p>自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。</p>
<p>自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。また、自分は子供の頃、絵本で地下鉄道というものを見て、これも</p>
			</div>
		</div>
	</div>
	
	<div class="js-tab-group tab-group mt-8">
		<ul class="tab-menu flex text-center">
			<li class="js-tab-menu__item tab-menu__item is-active">
				タブ1
			</li>
			<li class="js-tab-menu__item tab-menu__item">
				タブ2
			</li>
			<li class="js-tab-menu__item tab-menu__item">
				タブ3
			</li>
		</ul>
		<div class="tab-content">
			<div class="js-tab-content__item  tab-content__item is-active">
				<p>吾輩は猫である。</p>
<p>名前はまだ無い。</p>
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
<p>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
<p>この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。</p>
<p>第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。</p>
<p>その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。</p>
<p>のみならず顔の真中があまりに突起している。そうしてその穴の中から時々</p>
			</div>
			<div class="js-tab-content__item tab-content__item">
				<p>木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。</p>
<p>名高い桟も、蔦のかずらを頼みにしたような危い場処ではなくなって、徳川時代の末にはすでに渡ることのできる橋であった。新規に新規にとできた道はだんだん谷の下の方の位置へと降って来た。</p>
<p>道の狭いところには、木を伐って並べ、藤づるでからめ、それで街道の狭いのを補った。長い間にこの木曾路に起こって来た変化は、いくらかずつでも嶮岨な山坂の多いところを歩きよくした。そのかわり、大雨ごとにやって来る河水の氾濫が旅行を困難に</p>
			</div>
			<div class="js-tab-content__item tab-content__item">
				<p>恥の多い生涯を送って来ました。</p>
<p>自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。</p>
<p>自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。また、自分は子供の頃、絵本で地下鉄道というものを見て、これも</p>
			</div>
		</div>
	</div>
	
</div>
.container {
	width: min(95%, 1024px);
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
	line-height: 1.5;
}
.tab-menu {
	gap: 4px;
}
.tab-menu__item {
	width: 120px;
	padding: .5rem;
	background-color: #eee;
}
.tab-menu__item.is-active {
	background-color: #aaa;
}
.tab-content__item {
	overflow: hidden;
	height: 0;
	opacity: 0;
}
.tab-content__item.is-active {
	overflow: visible;
	height: auto;
	padding: 20px;
	border: 2px solid #aaa;
	opacity: 1;
	transition: opacity .4s ease-in-out;
}
$(function() {
	$('.js-tab-menu__item').on('click',function() {
		const tabGroup = $(this).parents('.js-tab-group');
    const tabMenu = tabGroup.find('.js-tab-menu__item');
    const tabContent = tabGroup.find('.js-tab-content__item');
    tabMenu.removeClass('is-active');
    $(this).addClass('is-active');
		const index = tabMenu.index(this);
    tabContent.removeClass('is-active');
    tabContent.eq(index).addClass('is-active');
  });
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js