jQuery UI を使えばタブ切り替えが簡単にできる

2017/02/15 ,

タブの制御は、きちんとコードが書ければそこまで難しくありませんが、jQuery UI を利用すれば、非常に簡単にタブの切り替えが出来るようになります。

jQuery UI を使うためには、jQuery と jQuery UI 関連のファイルを読み込む必要があります。過去のエントリーで、JavaScript ファイル・CSS ファイルの読み込みについて記載しているので、そちらを参考にしてください。

jQuery UI ファイルの読込みを Google の Libraries サイト (CDN) から参照する方法
※ 2015/9/2 記事内のjQuery UI のバージョンを 1.10.3 から 1.11.4 へ変更しました。jQuery UI を利用するには、jQu...

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

以下のサンプルは、3つのタブを用意した場合のプログラムとなります。実際にタブの数はいくつになっても同じように実装することができます。
まずは HTML から。

続いてJavascript。こちらはとてもシンプル。一番外側で囲っている div タグに対して.tabs() を指定するのみ。

たったこれだけです。感動するくらいシンプルです。それでは実際にサンプルで動作を確認してみましょう。

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

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

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

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


ね、簡単でしょ?(笑)

PAGE TOP ↑