jQuery-UI タブの組込み | 柴原ホームページ

jQuery-UIにTabs(タブ)ウィジェットがあります。ウィジェット上部のタブをクリックすると、それに対応するパネルが開きます。別のタブをクリックすると、それまで開いていたパネルを閉じられ、後からクリックされたタブに対応するパネルを開きます。
組込みは次のようにします。

<div class="ghead">
<h2>タブ形式のPhoto Gallery</h2>
</div>
<div id="tabs">         <!-- ウィジェットとなる要素 -->
  <ul>                  <!-- タブを構成する部分 -->
    <li><a href="#tab-1">花</a></li>
    <li><a href="#tab-2">鳥</a></li>
    <li><a href="#tab-3">アザラシ</a></li>
  </ul>
  <div id="tab-1">
    <img src="http://sample.com/img2/pic/flower.jpg" class="pic_image" alt="">
    <p>紫がきれいな花です。とてもみずみずしいです。</p>
  </div>
  <div id="tab-2">
    <img src="http://sample.com/img2/pic/bard.jpg"  class="pic_image" alt="">
    <p>名前はわかりませんがきれいで品のある鳥です。</p>
  </div>
  <div id="tab-3">
    <img src="http://sample.com/img2/pic/seal.jpg" class="pic_image"  alt="">
    <p>かわいいアザラシの子供です。</p>
  </div>
</div>
<script type="text/javascript">
jQuery(function($){
  $('#tabs').tabs();
});
</script>

サンプル