シンプル・便利な「jQuery UI Tabs」を使ってみよう
長～いページもスッキリ！jQueryでタブ表示
2009年02月04日 08時00分更新
Tabsを使ってみよう
Tabsを使うには、まずHTMLのヘッダーに以下のタグを入れます。「/path/to」の部分は、HTMLとjQueryなどのディレクトリ関係に応じて変えてください。
■ヘッダーに入れるタグ
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery-ui.js"></script>
<link type="text/css" href="/path/to/ui.core.css" rel="Stylesheet" />
<link type="text/css" href="/path/to/ui.theme.css" rel="Stylesheet" />
<link type="text/css" href="/path/to/ui.tabs.css" rel="Stylesheet" />
次に、body要素の中で、タブにしたい部分を以下のようにします。タブはul／li要素で表し、タブに表示する内容をdiv要素で表します。そして、タブ部分全体のdiv要素に対して、jQuery UI Tabsの「tabs」という関数を実行します。
■タブにしたい部分の組み方
<div id="タブ部分全体のID">
<ul>
<li><a href="#タブ1のID">タブ1に表示する文字列</a></li>
<li><a href="#タブ2のID">タブ2に表示する文字列</a></li>
・・・
<li><a href="#タブ2のID">タブ2に表示する文字列</a></li>
</ul>
<div id="タブ1のID">
タブ1の内容
</div>
<div id="タブ2のID">
タブ2の内容
</div>
・・・
<div id="タブnのID">
タブnの内容
</div>
</div>
<script type="text/javascript">
$('#タブ部分全体のID').tabs();
</script>
筆者のWebサイトには、実際に動作するjQuery UI Tabsのサンプルページを用意しました。具体的なHTMLのコードはこのサンプルを参照のうえ、試してみてください。
http://www.h-fj.com/ascii/jquery_tabs/sample.html
