jQueryのUIタブも簡単で便利ですが、さらにアクセシビリティにも配慮したスクリプトのご紹介。
jQueryUITabsでは、タブ部分をメニューとして扱い<ul>タグで指定しましたが、jQueryAccessibleTabsタブにあたる部分を<h2>タグで指定します。
コンテンツとメニュー（見出し）の構造が分かりやすくなるのでオススメ！
「jQueryAccessibleTabs」の下の方
You can download the script including the demos here.
からソースコード一式をダウンロード。
<script src="js/jquery-1.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.tabs.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tabs").accessibleTabs({
tabhead:'h2',
fx:"fadeIn"
});
});
</script>
<div class="tabs">
<h2>コンテンツ1</h2>
<div class="tabbody">
<h3>コンテンツ1-1</h3>
<p>コンテンツ１-1の内容</p>
<h3>コンテンツ1-2</h3>
<p>コンテンツ１-2の内容</p>
</div>
<h2>コンテンツ２</h2>
<div class="tabbody">
<h3>コンテンツ2-1</h3>
<p>コンテンツ2-1の内容</p>
</div>
<h2>コンテンツ３</h2>
<div class="tabbody">
<p>コンテンツ３の内容</p>
</div>
</div>
投稿日：