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

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

使用方法
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>

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

sponsors

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

記事作成:
記事URL:

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