jQuery UIを利用してタブを作成するコード

jQuery UIを利用することで簡単にタブを作成できます。

jQuery UIでタブを作成する方法

divタグのidにtabsを設定（div id=”tabs”）
タブは、ulタグにliを作成します。
タブをクリックしたときに表示するパネル（div id=”パネルid”タブに関連付けるコンテンツ部分）のidに「li a href=”#パネルID”」を設定します。

<div id="tabs">
  <ul>
    <li><a href="#tabs1">Tab1</a></li>
    <li><a href="#tabs2">Tab2</a></li>
    <li><a href="#tabs3">Tab3</a></li>
  </ul>
  <div id="tabs1">
    <p>Tab1 コンテンツ</p>
  </div>
  <div id="tabs2">
    <p>Tab2 コンテンツ</p>
  </div>
  <div id="tabs3">
    <p>Tab3 コンテンツ</p>
  </div>
</div>

タブを使えるようにするスクリプトが下のコードです。

<script>
$(function() {
	$( "#tabs" ).tabs();
});
</script>

スタイルを変更したいときは、下のコードのように設定します。

<style>
#tabs {
     width: 350px;
     font-size: 12px;
}
 </style>