[jQuery] タブを作る_jQuery UI

jQuery UIを使うと、以下のようなUIを簡単に作ることができます。

201510001_img

ヘッダーで以下を読み込みます。

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
$(function() {
    $( "#tabs" ).tabs();
});

HTMLソース例。

<div id="tabs">
      <ul>
        <li><a href="#tabs_a">タブA</a></li>
        <li><a href="#tabs_b">タブB</a></li>
        <li><a href="#tabs_c">タブC</a></li>
      </ul>

      <div id="tabs_a">
        <p>タブAのコンテンツ領域です。</p>
      </div>

      <div id="tabs_b">
        <p>タブBのコンテンツ領域です。</p>
      </div>

      <div id="tabs_c">
        <p>タブCのコンテンツ領域です。<br>
        タブCのコンテンツ領域です。</p>
      </div>
</div>

できること

  • 折りたたみ(タブを再度クリックするとコンテンツが閉じる)
  • Ajax連携
  • マウスオーバーでのイベントの切り替え
  • シンプルなタブ編集(タブを追加、削除できる)
  • 並べ替え
  • 下向き
  • 縦向き
  • ページ読み込み時に表示させたいタブを指定する
  • アニメーションや、エフェクトなど

参考サイト

タブのサンプルはこちら