jQueryでタブを切り替える

タブをクリックしたときに画面を切り替える動作は、JQueryで次のように記述します。
たったこれっぽっちです。
class="active"は、タブの色をCSSで変える目印です。
コンテンツの切り替えは実質後半の3行のみで行っています。

$(function(){

	$("a.tab").click(function () {
	// class="tab"のaタグがクリックされたとき
	
		$(".active").removeClass("active");
		// class="active"からacticveを削除する

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

		$(".content").hide();
		// コンテンツを一旦非表示
		
		var content_show = $(this).attr("title");
		$("#"+content_show).show();
		// クリックされたaタグのtitle属性と同じid要素のみを再表示
		
	});
});

コンテンツに着けたidとタブの<a>タグのtitle属性を対応させます。

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

	<li><a href="#" title="content_2" class="tab">HTML</a></li>
	<li><a href="#" title="content_3" class="tab">CSS</a></li>
</ul>

// コンテンツ部
<div id="content_1" class="content">
	コンテンツ１
</div>

<div id="content_2" class="content">
	コンテンツ２
</div>

<div id="content_2" class="content">
	コンテンツ３
</div>

あとはCSSでデザインを指示すればOKです
「ul.tabs li a.active」がアクティブタブに対する指示です。

.tabbed_area {
width:640px;
border:1px solid #111;
background-color:#ccc;
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:#666;
color:#fff;
padding:8px 14px 8px 14px;
text-decoration:none;
border:1px solid #222;
border-bottom: 0px
}
ul.tabs li a:hover {
background-color:#222;
border-color:#222;
}
ul.tabs li a.active {
background-color:#fff;
color:#222;
border:1px solid #222;
border-bottom: 1px solid #fff;
}
.content {
background-color:#ffffff;
padding:10px;
border:1px solid #464c54;
}
#content_2, #content_3 { display:none; }