タブメニューを作成するjavascript「MooTabs1.2」

メニューにもさまざまな種類がありますが、エフェクトありだとアコーディオンやタブが主流でしょう。
そんなタブメニューに動きを加えたスクリプトです。
MooTabs1.2はmootoolsベースで簡単にタブメニュ?を作成できます。
mootabs

使用方法
MooTabs1.2からmootabs1.2.jsとmootabas1.2.cssをダウンロードします。
もちろんmootools.jsもダウンロードしてください。
<link rel="stylesheet" href="http://yourdomain/mootabs1.2.css" type="text/css" media="screen">
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/mootabs1.2.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', init);
function init() {
myTabs1 = new mootabs('タブid名');
}
</script>

上記のようにheadに書き込んだらHTMLを以下のようにします。
<div id="タブid名">
<ul class="mootabs_title">
<li title="Tab1">Tab1</li>
<li title="Tab2">Tab2</li>
<li title="Tab3">Tab3</li>
</ul>
<div id="Tab1" class="mootabs_panel">
Tab1コンテンツ
</div>
<div id="Tab2" class="mootabs_panel">
Tab2コンテンツ
</div>
<div id="Tab3" class="mootabs_panel">
Tab3コンテンツ
</div>
</div>

またテキストでもタブ間を遷移させる場合は以下のように記述します。
<a href="#" onclick="myTabs1.previous()">前</a> | <a href="#" onclick="myTabs1.next()">次</a>
タブメニューを作成するjavascript「MooTabs1.2」サンプル

sponsors

「タブメニューを作成するjavascript「MooTabs1.2」」をシェアする

記事作成:
記事URL:

TOP > > > タブメニューを作成するjavascript「MooTabs1.2」