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

更新日: 公開日:2014/10/18
jQueryUIでタブを実装

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

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

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

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

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

jQuery UI Tabs HTML ソース
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">タブ1つめ</a></li>
    <li><a href="#tabs-2">タブ2つめ</a></li>
    <li><a href="#tabs-3">タブ3つめ</a></li>
  </ul>
  <div id="tabs-1">
    <p>1つめのタブの内容を記載します。<br />
    一番外側のdivタグできちんと囲うことがポイントです。
    </p>
  </div>
  <div id="tabs-2">
    <p>2つめのタブの内容を記載します。<br />
    タブの部分は ul タグで実装します。
    </p>
  </div>
  <div id="tabs-3">
    <p>3つめのタブの内容を記載します。<br />
    li タブ内のリンクが、各タブ内容を記述する div タグの id を指定します。<br />
    id へのリンクなので、href 属性の指定先に # を付けるのを忘れずに。
    </p>
  </div>
</div>
実装のポイント
  • 全体をブロック要素で囲み id を設定
  • タブ部分は ul のリストタグで作成
  • タブの中身を囲む div タグは id を指定する
  • タブのテキスト部分は a タグで囲む
  • a タグの href は # を付けて id を指定
  • 指定する id は重複しないこと

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

jQuery UI Tabs JavaScript ソース
$(function() {
  $( "#tabs" ).tabs();
});

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

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

1つめのタブの内容を記載します。
一番外側のdivタグできちんと囲うことがポイントです。

2つめのタブの内容を記載します。
タブの部分は ul タグで実装します。

3つめのタブの内容を記載します。
li タブ内のリンクが、各タブ内容を記述する div タグの id を指定します。
id へのリンクなので、href 属性の指定先に # を付けるのを忘れずに。

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

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

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

\ この記事をシェアする /

このブログの運営者

NJ

Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。