シンプル 自動切替えタブ型メニュー
シンプルな「自動切り替え」タブ型メニューボックス。
デザインはCSSで行います。
タグの構造もシンプルなので実装が簡単にできます。
配布元:yetii
ページ下部にある「yetii.js」をダウンロード
(※ファイルが表示されるので、それをyetii.jsと名前をつけて、任意の場所へ保存)
<script type="text/javascript" src="js/yetii.js"></script>内にJavaScriptを読み込ませる。
<!-- tabBox satrt --> <div id="tabBox"> <ul id="tabBox-nav"> <li><a href="#">Tab 1</a></li> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 3</a></li> <li><a href="#">Tab 4</a></li> </ul> <div style="display: none;" class="tab"> <p><span class="gr">tab01</span><br>に切り替わりました。</p> </div> <div style="display: block;" class="tab"> <p><span class="gr">tab02</span><br>に切り替わりました。</p> </div> <div style="display: block;" class="tab"> <p><span class="gr">tab03</span><br>に切り替わりました。</p> </div> <div style="display: block;" class="tab"> <p><span class="gr">tab04</span><br>に切り替わりました。</p> </div> </div> <!-- //tabBox end -->
このとき、
ターゲットのボックスの「class="tab"」を定義することを忘れないようにする。
そして最後に、スクリプト実行のトリガーを設置する。
<script type="text/javascript"> var tabber1 = new Yetii({ id: 'tabBox', tabclass: 'tab', active: 2, //デフォルトタブ表示位置 interval: 5 //切替る速度 }); </script>
#tabBox { width: 500px; margin: 0px; } ul#tabBox-nav { list-style-type: none; width: 500px; float: left; background: url(../pixel.gif) bottom left repeat-x; } ul#tabBox-nav li { margin-right: 2px; float: left; } ul#tabBox-nav a { float: left; display: block; padding: 4px 8px; border: 1px solid #ccc; border-bottom: 0; color: #666; background: #eee; text-decoration: none; font-weight: bold; outline: none; } ul#tabBox-nav a:hover { background: #fff; } ul#tabBox-nav a.active { background: #fff; padding-bottom: 5px; cursor: default; color: #00BF08; } #babTxt { margin: 0px; padding: 0px; } .tab { width: 478px; clear: left; border: 1px solid #ccc; border-top: none; padding: 10px; } .gr { color: #00BF08; font-weight: bold; }