jQueryでつくるタブメニュー | 25egg

仕事でも使う機会が多かったので、Tipsメモしておきます。

確認環境Chorme54,Safari9

HTML

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

jQuery

この記述の前にjQueryの読み込みが必要です。

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();
});

CSS

タブの装飾です。

.tabnav{
	margin: 0;
	padding: 0;
}
.tabnav li{
	display: inline;
}
.tabnav li a{
	display: inline-block;
	background: #405dca;
	color: #fff;
	padding: 5px;
	border-radius: 5px 5px 0 0;
	text-decoration: none;
}
.tabnav li a:hover,
.tabnav li a.active{
	background: #ddd;
	color: #333;
}
#tabcontent{
	padding: 5px;
	border: 1px dotted #ccc;
}
<< ブログ記事にもどる