《jQuery》クリックで切り替わるシンプルなタブメニュー

<ul class="tabnav">
	<li class="tabnav-list"><a href="#tab01">タブ1</a></li>
	<li class="tabnav-list"><a href="#tab02">タブ2</a></li>
	<li class="tabnav-list"><a href="#tab03">タブ3</a></li>
</ul>
<div class="tabcontent">
	<div id="tab01">タブ1の内容</div>
	<div id="tab02">タブ2の内容<br>タブ2の内容</div>
	<div id="tab03">タブ3の内容<br>タブ3の内容<br>タブ3の内容</div>
</div>

.tabnav {
	display: flex;
	margin: auto -5px;
	padding: 0;
}
.tabnav-list {
	list-style: none;
	margin: auto 5px;
}
.tabnav-list a {
	background: #111;
	border-radius: 5px 5px 0 0;
	color: #fff;
	display: block;
	outline: none;
	padding: 10px 20px;
	text-decoration: none;
}
.tabnav-list a:hover,
.tabnav-list a.active {
	background: #ddd;
	color: #333;
}
.tabcontent {
	border: 1px dotted #ccc;
	padding: 20px;
}

jQuery(function($){
	$('.tabcontent > div').hide();

	$('.tabnav a').click(function () {
		$('.tabcontent > div').hide().filter(this.hash).fadeIn();

		$('.tabnav a').removeClass('active');
		$(this).addClass('active');

		return false;
	}).filter(':eq(0)').click();
});