JavaScriptで作るシンプルなタブメニュー「simpleTabs 」

タブメニューの導入には手間がかかります。
また、既存のjsだと余計な機能が入っているケースも多いです。
jQueryプラグイン「simpleTabs」は機能を絞りながら、十分に役立つJavaScriptです。
JavaScriptで作るシンプルなタブメニュー「simpleTabs 」

使用方法
simpleTabsからファイル一式をダウロードします。
<link rel="stylesheet" type="text/css" href="simpleTabs.css" />
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript" src="simpleTabs.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#simpleTabs").simpleTabs({
fadeSpeed: "medium", // スピード:low, medium, fast
defautContent: 1, // デフォルトのタブ
autoNav: "true", // オートナビ?
closeTabs : "true" // クローズをつけるかどうか
});
});
</script>

最後にタブを以下のように記述すれば完成です。
<div id="simpleTabs">
<div class="simpleTabs-nav"></div> //ナビゲーション表示部分
<div id="simpleTabs-content-1" class="simpleTabs-content">
コンテンツ
</div>
<div id="simpleTabs-content-2" class="simpleTabs-content"> //数字を増やします。
コンテンツ
</div>
</div>

JavaScriptで作るシンプルなタブメニュー「simpleTabs 」サンプル

sponsors

「JavaScriptで作るシンプルなタブメニュー「simpleTabs 」」をシェアする

記事作成:
記事URL:

TOP > > > JavaScriptで作るシンプルなタブメニュー「simpleTabs 」