ホーム サンプルコード一覧 11. Tab

11. Tab

tab_capture1

実現される機能

タブナビゲーションを実現します

ダウンロード

※ダウンロードファイル内に、ソースコードとともに以下のデモが同梱されています。

デモ

ラスター画像(JPG)のサンプル

単純な構造のサンプルです。

使用手順

1. 依存ライブラリの読み込み

Tabが依存する、以下のライブラリを読み込みます。

<script src="../../common/js/jquery.min.js"></script>
<script src="libs/jquery.tabify.min.js"></script>

2. タブのスクリプト読み込み

タブのスクリプトを読み込みます。

<script src="script.js"></script>

3. カルーセルを配置するための要素を用意

ページ内に、タブを配置するための要素を用意します。

<div class="mod-tabset">

  <ul class="mod-tab">
    <li><a class="mod-tab-tabitem mod-tab-active" href="#tab-A">tab-A</a></li>
    <li><a class="mod-tab-tabitem" href="#tab-B">tab-B</a></li>
  </ul>

  <div class="mod-tabset-tabcontentwrapper">

    <div class="mod-tabset-tabcontentdiv mod-tabset-tabcontentdiv-active" id="tab-A">

      タブAの内容

    <!-- /.mod-tabset-tabcontentdiv --></div>

    <div class="mod-tabset-tabcontentdiv" id="tab-B">

      タブBの内容

    <!-- /.mod-tabset-tabcontentdiv --></div>

  <!-- /.mod-tabset-tabcontentwrapper --></div>

<!-- /.mod-tabset --></div>

タブを実現するためのHTMLは、「タブ部分」と「コンテンツ部分」に分かれています。

タブ部分(.mod-tab)については、上記のli要素がタブ一つを表し、その中にあるa.mod-tab-tabitemがそれぞれ、タブの変更をトリガーするボタンとなっています。ahrefには、対応するコンテンツのidを指定します。

タブ部分である、.mod-tabset-tabcontentwrapperの中には、.mod-tabset-tabcontentdivを、タブの数ぶんだけ並べます。そして、それぞれに、タブ部分にて指定したidを付加します。

初めからアクティブにしておきたいタブには、mod-tab-activeをclass属性に追加し、対応するコンテンツには、mod-tabset-tabcontentdiv-activeをclass属性に追加します。

これで、タブのクリックに対応し、対応するコンテンツが表示されるようになります。

タブの数を変更したい場合

タブの数を4つにしたい場合は、例えば以下のようなHTMLを書きます。

<div class="mod-tabset">

  <ul class="mod-tab">
    <li><a class="mod-tab-tabitem mod-tab-active" href="#tab-A">tab-A</a></li>
    <li><a class="mod-tab-tabitem" href="#tab-B">tab-B</a></li>
    <li><a class="mod-tab-tabitem" href="#tab-C">tab-C</a></li>
    <li><a class="mod-tab-tabitem" href="#tab-D">tab-D</a></li>
  </ul>

  <div class="mod-tabset-tabcontentwrapper">
    <div class="mod-tabset-tabcontentdiv mod-tabset-tabcontentdiv-active" id="tab-A">タブAの内容</div>
    <div class="mod-tabset-tabcontentdiv" id="tab-B">タブBの内容</div>
    <div class="mod-tabset-tabcontentdiv" id="tab-C">タブCの内容</div>
    <div class="mod-tabset-tabcontentdiv" id="tab-D">タブDの内容</div>
  <!-- /.mod-tabset-tabcontentwrapper --></div>

<!-- /.mod-tabset --></div>

ただ、このスケルトンコードでは、CSSを、タブが2つ並ぶ時を想定して書いています。必要に応じ、CSSの変更を行ってください。

より細かい設定方法

見栄えをカスタマイズしたい場合は、style.css内のCSSを編集してください。また、それに応じてクラス名を変更したい場合、script.js内の対応するセレクタやクラスを変更してください。

タブをより自由に使いたい場合は、本スケルトンが依存する jQuery.tabify を直接ご利用ください。