jQueryでタブメニューを作る(プラグインなし)

JavaScriptライブラリのjQueryには数多くのプラグインがあり、それを利用することで簡単にリッチなコンテンツを作成できます。
今回はその流れに逆らい、プラグインなしでタブメニューを作成してみたいと思います。
via:Tabbed Structure

sponsors

使用方法

まずは、jQueryからjquery.jsをダウロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script>
$(function(){
	$("a.tab").click(function () { 
	//class="tab"のaタグがクリックされたとき

		$(".active").removeClass("active");
		//class="active"からacticveを削除する

		$(this).addClass("active");
		//クリックされたaタグにclass="active"を付与

		$(".content").slideUp();
		//コンテンツをスライドアップで表示

		var content_show = $(this).attr("title");
		$("#"+content_show).slideDown();
		//クリックされたaタグのtitle属性と同じid要素をスライドダウンで非表示
	});
});
</script>
上記にのっとり、htmlを記述していきます。

<div class="tabbed_area">
<ul class="tabs">
	<li><a href="#" title="content_1" class="tab active">タブ1</a></li>
	// 最初に開いておくタブにclass="active"を付与しておきます。

	<li><a href="#" title="content_2" class="tab">タブ2</a></li>
	<li><a href="#" title="content_3" class="tab">タブ3</a></li>
</ul>
<div id="content_1" class="content">
	//ここでもidは上記li a要素のtitleで指定したものと同一にしてください。
	<p>タブコンテンツ1タブコンテンツ1タブコンテンツ1<br />タブコンテンツ1タブコンテンツ1</p>
</div>
<div id="content_2" class="content">
	<p>タブコンテンツ2タブコンテンツ2タブコンテンツ2<br />タブコンテンツ2タブコンテンツ2</p>
</div>
<div id="content_3" class="content">
	<p>タブコンテンツ3タブコンテンツ3タブコンテンツ3<br />タブコンテンツ3タブコンテンツ3</p>
</div>
</div>
あとは、CSSでデザインを調整すれば完成です。

.tabbed_area {width:450px;border:1px solid #494e52;background-color:#636d76;padding:8px;}
//タブコンテンツ全体のデザイン

ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;border:1px solid #464c54;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
//タブ自体のデザイン

ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;}
//タブが開いているときのデザイン

.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;}
//タブの中身のデザイン

#content_2, #content_3 { display:none; }
//最初に開いているもの以外のタブの中身は消しておく。

サンプル

タブコンテンツ1タブコンテンツ1タブコンテンツ1
タブコンテンツ1タブコンテンツ1

タブコンテンツ2タブコンテンツ2タブコンテンツ2
タブコンテンツ2タブコンテンツ2

タブコンテンツ3タブコンテンツ3タブコンテンツ3
タブコンテンツ3タブコンテンツ3

sponsors

Javascriptサンプルページ一覧
skuare.net