タブ型メニュー

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのUI Tabsのプラグインを利用してタブ型メニューを表示します。 タブの名称はul/li要素で宣言します。タブのコンテンツはdiv要素で宣言します。

このサンプルは、jQueryのUI Tabsのプラグインを利用してタブ型メニューを表示します。 タブの名称はul/li要素で宣言します。タブのコンテンツはdiv要素で宣言します。

このサンプルで使用しているイメージです。イメージを右クリックしてダウンロードしてください。

tab.png
loading.gif 

$(function() {   
  $('#tabs > ul').tabs();   
});  



<div id="tabs">
  <ul>
    <li><a href="#tab1"><span>tab1</span></a></li>
    <li><a href="#tab2"><span>tab2</span></a></li>
    <li><a href="#tab3"><span>tab3</span></a></li>
  </ul>
  <div id="tab1">
    <p>
    contents
    </p>
  </div>
  <div id="tab2">
    <p>
    contents
    </p>
  </div>
  <div id="tab3">
    <p>
    contents
    </p>
  </div>
</div>