jQueryで作るシンプルなタブのインターフェース[js]

tab0907261.jpg

Papermashup.comより、jQueryで作るシンプルなタブのインターフェースの紹介です。

デモページはこちらから

設置方法は下記のようにマークアップをする必要があります。

HTML

<div id="tabs">

<ul>
<li><a href="#tab-1">This is Tab 1</a></li>
<li><a href="#tab-2">Tab Two</a></li>
<li><a href="#tab-3">Tab Three</a></li>
<li><a href="#tab-4">Tab Four</a></li>
</ul>

<div id="tab-1">

<h3>Tab 1</h3>

<p><img src="http://papermashup.com/demos/jquery-gallery/images/t1.png" width="120" height="120" class="thumbs"/> ..</p>

</div>

<div id="tab-2">

<h3>Tab 2</h3>

<p><img src="http://papermashup.com/demos/jquery-gallery/images/t2.png" width="120" height="120" class="thumbs"/> ..</p>

</div>

<div id="tab-3">

<h3>Tab 3</h3>

<p><img src="http://papermashup.com/demos/jquery-gallery/images/t3.png" width="120" height="120" class="thumbs"/>..</p>

</div>

<div id="tab-4">

<h3>Tab 4</h3>

<p>..</p>

</div>

</div>

jQuery

$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');

$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});

CSSも必要なのですがデモに載っているCSS通りに書かなくても良いですね。
一応参考までに

#tabs {
	font-size: 90%;
	margin: 20px 0;
}
#tabs ul {
	float: left;
	background: #fff;
	width: 500px;
	padding-top: 4px;
}
#tabs li {
	margin-left: 8px;
	list-style: none;
}
* html #tabs li {
	display: inline;
}
#tabs li, #tabs li a {
	float: left;
}
#tabs ul li.active {
	border-top:2px #FFFF66 solid;
	background: #FFFFCC;
}
#tabs ul li.active a {
	color: #333333;
}
#tabs div {
	background: #FFFFCC;
	clear: both;
	padding: 15px;
	min-height: 200px;
}
#tabs div h3 {
	margin-bottom: 12px;
}
#tabs div p {
	line-height: 150%;
}
#tabs ul li a {
	text-decoration: none;
	padding: 8px;
	color: #000;
	font-weight: bold;
}
.thumbs {
	float:left;
	border:#000 solid 1px;
	margin-bottom:20px;
	margin-right:20px;
}