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

2014/10/18

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

まず前提として jQuery UI を利用するのは、jQuery と jQuery UI のライブラリとデザインを定義したテーマの CSS ファイルを読み込む必要があります。ネットワーク環境で利用する際は 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 テーマ一覧
jQuery UI を利用するには JavaScript のライブラリを読み込む必要があります。jQuery の処理を用いて実装されているため、具体的には以下の3ファ...

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

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

NJ-CLUCKER RSS

このブログの運営者

NJ

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

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

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします