このページの本文へ

シンプル・便利な「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


■関連サイト

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング