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

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

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

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

jQuery UI CDN 外部ファイル読み込み
jQuery UI のファイル読込みを CDN のライブラリから参照する方法
jQuery UI を利用するには JavaScript のライブラリを読み込む必要があります。jQuery の処理を用いて実装されているため、具体的には以下の3ファ...

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

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 CDN 外部ファイル読み込み
jQuery テーマ一覧
jQuery UI を利用するには JavaScript のライブラリを読み込む必要があります。jQuery の処理を用いて実装されているため、具体的には以下の3ファ...

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

Amazon タイムセール祭り【2018年4月】おすすめ商品一覧

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

元システムエンジニアから、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。

更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。