Yetiiでタブ
- Yetii
http://www.kminek.pl/lab/yetii/
js以外ダウンロードできない模様。。。
先生のをそのままみたいで恥ずかしいですが、メモということで。。。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タブナビ</title> <style> *{margin:0; padding:0;} #tabBox { width: 500px; margin: 0px; } ul#tabBox-nav { list-style-type: none; width: 500px; float: left; margin: 0; background:url(images/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; } .tab { width: 478px; clear: left; border: 1px solid #ccc; border-top: none; padding: 10px; } .gr { color: #00BF08; font-weight: bold; } </style> <script src="js/yetii-min.js"></script> </head> <body> <div id="tabBox"> <ul id="tabBox-nav"> <li><a href="#sampletab1">tab01</a></li> <li><a href="#sampletab2">tab02</a></li> <li><a href="#sampletab3">tab03</a></li> <li><a href="#sampletab4">tab04</a></li> </ul> <div class="tab" id="sampletab1"> <p><span class="gr">tab01</span><br>に切り替わりました。</p> </div> <div class="tab" id="sampletab2"> <p><span class="gr">tab02</span><br>に切り替わりました。</p> </div> <div class="tab" id="sampletab3"> <p><span class="gr">tab03</span><br>に切り替わりました。</p> </div> <div class="tab" id="sampletab4"> <p><span class="gr">tab04</span><br>に切り替わりました。</p> </div> </div> <script type="text/javascript"> var tabber1 = new Yetii({ id: 'tabBox' }); </script> </body> </html>