フラットなタブを実装するjQueryコードとCSS

フラットなデザインのタブを実装するjQueryコードとCSSを紹介します。
例によって簡単にタブを作れるjQueryライブラリがありますので、めんどうな方はそちらを使用するとラクチンだと思います。

jQueryライブラリ
jQueryUI

jQueryコード

仮にjquery.tab.jsと名前をつけて保存

$(function(){
	$('.tabbox:first').show();
	$('#tab li:first').addClass('active');
	$('#tab li').click(function() {
		$('#tab li').removeClass('active');
		$(this).addClass('active');
		$('.tabbox').hide();
		$($(this).find('a').attr('href')).fadeIn();
		return false;
	});
});

2行目[.tabbox] 実際に切り替わるコンテンツ部分
3,4,5行目[#tab li] クリックするタブ

大体のコード記述の流れはこんな感じです。

jquery発動のための準備
[.tabbox]要素ひとつめを表示
[#tab li]要素ひとつめにクラス[active]が付加
タブがクリックされた際の動作を指定
[#tab li]要素ひとつめからクラス[active]が取り除かれる
クリックされた[#tab li]要素にクラス[active]が付加
[.tabbox]要素を非表示
クリックした[#tab li]要素から[a]要素を探して中身を取得しフェードインで表示

HTML

head内

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.tab.js"></script>

body内

<ul id="tab">
<li class="selected"><a href="#tab1">タブ1</a></li>
<li><a href="#tab2">タブ2</a></li>
<li><a href="#tab3">タブ3</a></li>
<li><a href="#tab4">タブ4</a></li>
<li><a href="#tab5">タブ5</a></li>
</ul>
<div id="detail">
<div id="tab1" class="tabbox">
<p>タブ1のコンテンツ。</p>
<!-- #tab1 --></div>
<div id="tab2" class="tabbox">
<p>タブ2のコンテンツ。</p>
<!-- #tab2 --></div>
<div id="tab3" class="tabbox">
<p>タブ3のコンテンツ。</p>
<!-- #tab3 --></div>
<div id="tab4" class="tabbox">
<p>タブ4のコンテンツ。</p>
<!-- #tab4 --></div>
<div id="tab5" class="tabbox">
<p>タブ5のコンテンツ。</p>
<!-- #tab5 --></div>
<!-- #detail --></div>

CSS

ul#tab {
	zoom: 1;
	background: #c9c3c4;
	border-bottom: 3px solid #c81528;
	list-style: none;
	margin: 0 auto;
	padding: 0;
}
ul#tab:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
ul#tab li {
	float: left;
	text-align: center;
}
ul#tab li:last-child {
	background: none;
}
ul#tab li a {
	display: block;
	width: 138px;
	padding: 8px 0;
	text-decoration: none;
	color: #222;
}
ul#tab li a:hover {
	background: #c95560;
	color: #fff;
}
ul#tab li.active,
ul#tab li.active a,
ul#tab li.active a:hover {
	background: #c81528;
	color: #fff;
}
#detail {
	clear: both;
	overflow: hidden;
	background: #f7f7f7;
	width: 650px;
	height: 200px;
	padding: 20px;
}
.tabbox {
	display: none;
}