jQuery UI の Tabs を使って簡単にタブ切り替えを実装する方法

HTML 上のタブ切り替え画面の実装は、JavaScript でもさほど難しいものではありません。それでも jQuery UI で提供されている Tabs を利用すれば、もっと簡単に実装することができます。

まず前提として jQuery UI を利用するのは、jQuery と jQuery UI のライブラリとデザインを定義したテーマの CSS ファイルを読み込む必要があります。ネットワーク環境で利用する際は CDN を利用することもできます。詳しくは次のページに記しているので参考にしてください。

jQuery UI のファイル読込みを CDN のライブラリから参照する方法

jQuery UI を利用するには JavaScript のライブラリを読み込む必要があります。jQuery の処理を用いて実装されているため、具体的には以下の３ファ...

それではタブ切替のサンプルプログラムをご覧ください。

jQuery UI でタブの切り替えを実装

以下のサンプルは、３つのタブで構成した画面になります。jQuery UI のプログラムではタブの数に上限がないので、必要に応じて数を調整してください。

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">タブ１つめ</a></li>
    <li><a href="#tabs-2">タブ２つめ</a></li>
    <li><a href="#tabs-3">タブ３つめ</a></li>
  </ul>
  <div id="tabs-1">
    <p>１つめのタブの内容を記載します。<br />
    一番外側のdivタグできちんと囲うことがポイントです。
    </p>
  </div>
  <div id="tabs-2">
    <p>２つめのタブの内容を記載します。<br />
    タブの部分は ul タグで実装します。
    </p>
  </div>
  <div id="tabs-3">
    <p>３つめのタブの内容を記載します。<br />
    li タブ内のリンクが、各タブ内容を記述する div タグの id を指定します。<br />
    id へのリンクなので、href 属性の指定先に # を付けるのを忘れずに。
    </p>
  </div>
</div>

続いて JavaScript のソースです。全体を囲っているブロック要素（div タグ）に指定した id に対して .tabs() を指定するだけです。

$(function() {
  $( "#tabs" ).tabs();
});

プログラムはとてもシンプルです。ではサンプルプログラムの動作を確認してみましょう。

タブの切り替えの実装サンプル

タブのデザインは jQuery UI の CSS でデザインされたものです。読み込むテーマファイルを変更することで、様々なカラーバリエーションに変更することができます。

テーマに関する情報は次のページに掲載しているので、そちらを参照ください。

jQuery テーマ一覧

jQuery UI を利用するには JavaScript のライブラリを読み込む必要があります。jQuery の処理を用いて実装されているため、具体的には以下の３ファ...

以上、jQuery UI の Tabs でタブ切り替えを実装する方法でした。