studio-benkei

わずか2KBで使えるタブインタフェース実装用jQueryプラグイン「idTabs」の紹介です。
UL要素の中にリストを定義してあるのがタブ部分で、<div>部分が該当ページ部分です。

idTabsはjQueryのプラグインのため、実装にはjquery.jsが必要です。

ダウンロード&参考サイト　→　idTabs

設定 ▼

						<script type="text/javascript" src="idTabs.js"></script>             
          

HTML ▼

          <div id="usual1" class="usual">
            <ul> 
              <li><a class="selected" href="#tab1">Tab 1</a></li> 
              <li><a href="#tab2">Tab 2</a></li> 
              <li><a href="#tab3">Tab 3</a></li> 
            </ul> 
            <div id="tab1">
            	コンテンツ1
            </div> 
            <div id="tab2">
            	コンテンツ2
            </div> 
            <div id="tab3">
            	コンテンツ3
            </div> 
          </div> 
          

JavaScript ▼

          <script type="text/javascript"> 
            $("#usual1 ul").idTabs(); 
          </script>