JavaScriptでタブメニューを簡単に作る「Semantic Tabs」

よくあるタブメニューをJavaScriptライブラリjQueryで簡単に作成できるSemantic Tabsを紹介します。
※このjQueryプラグインは名の通り文章構造が非常にセマンティックです（後述）。

使用方法

Semantic Tabsからjquery.semantictabs.jsをjQueryからjquery.jsをダウロードします。


<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript" src="jquery.semantictabs.js"></script>
<script type="text/javascript">
$(function(){
	$("#id名").semantictabs({
		panel:'panel',　//パネルのクラス名 
		head:'h3', //タブの要素名
		active:':first' //最初にアクティブにするタブ
	});
});
</script>

次に以下のように記述すれば完成です。


<div id="id名">
  <div class="panel（パネルクラス名）">
    <h3（タブの要素名）>Tab1</h3>
     パネルコンテンツ
  </div>
  ～タブ分記述
</div>

またCSSのサンプルは以下となります。


ul.semtabs {margin:0 auto;clear:both;border-bottom: 4px solid #4c77b3;height:25px;list-style:none !important;}
ul.semtabs li {float:left;height:30px;display:block;margin:0 !important;background-image:none;}
ul.semtabs li a {/*  height:15px;*/line-height:15px;display:block;padding: 5px 5em;text-decoration:none;font-weight:bold;background-color:#e6eeee;}
ul.semtabs li.active a {background-color: #4c77b3;color: #fff;}

※セマンティック
多くのタブメニューが以下のような記述をみると、今回のSemantic Tabsの構造がすっきりかつ明解なことがわかります。


<ul><li>Tab1</li><li>Tab2</li><li>Tab3</li></ul>
<div>Panel 1</div>
<div>Panel 2</div>
<div>Panel 3</div>

サンプル

Tab1

Panel stuff 1

Tab2

Panel stuff 2

Tab3

Panel stuff 3

Javascriptサンプルページ一覧

skuare.net