Web制作の現場で使えるjQuery　UIデザイン入門 ― 第15回

jQueryでタブパネルを作るチュートリアル (1/3)

※この記事は「Web制作の現場で使えるjQuery　UIデザイン入門」の第15回です。過去の記事もご覧ください。

　「タブパネル」はタブ（見出し）をクリックすると、パネル（タブの内容が書かれた部分）が切り替わるUIです。アコーディオンパネル（関連記事）と同じく、情報量に対して表示スペースが少ない場合に使われます。Yahoo!やlivedoorなどの大手ポータルサイトがトップページで採用していることもあり、現在では多くのユーザーが迷わず操作できるUIとして定着しています。

今回制作するサンプル

「タブパネルUI」の完成画面。タブ部分をクリックすると、下のパネルの表示が切り替わる（画像クリックでサンプルページを表示します）

基本のタブパネルの作り方

　タブパネルのHTML／XHTML（以下、HTML）は、タブ部分（見出し）とパネル部分（表示する中身）をul/li要素を使って別々にマークアップし、タブのul要素には「tab」、パネルのul要素には「panel」というclass名を付けます。

　パネル部分は、タブが選択されたときに表示する内容をli要素で1つずつ記述していき（1タブ項目＝1つのli要素）、それぞれに「tab1」「tab2」……といった連番のid名を設定します。

　タブ部分も同様に、タブの項目名を1つずつli要素で記述していきます。タブの項目名はa要素で包み、href属性には先ほどのパネルのid名に#を付けた値を設定します（ページ内リンクにする）。また、初期状態（ページが読み込まれた段階）で表示するタブには、a要素にclass属性「selected」を設定します。

▼サンプル01（HTML部分）

<div id="container">
    <ul class="tab">
        <li><a href="#tab1" class="selected">JavaScript</a></li>
        <li><a href="#tab2">CSS</a></li>
        <li><a href="#tab3">HTML</a></li>
        <li><a href="#tab4">jQuery</a></li>
        <li><a href="#tab5">XHTML</a></li>
    </ul>
    <ul class="panel">
        <li id="tab1">Lorem ...（中略）... ligula. </li>
        <li id="tab2">Nam...（中略）...ipsum. </li>
        <li id="tab3">Pellentesque ...（中略）... velit. </li>
        <li id="tab4">Vestibulum ...（中略）... magna. </li>
        <li id="tab5">Vestibulum ...（中略）... velit. </li>
    </ul>
</div>

　CSSは次のようになります。タブ部分（ul.tab li）はfloatを利用して横一列に並べ、a要素をdisplay:blockでブロックレベル要素に変更してクリックしやすくしています。また、タブが選択された状態のデザインを「a.selected」で定義してあります。ここでは、text-decoration:none;でリンクの下線を非表示に、cursor:default;でマウスカーソルの形状をデフォルトに、背景画像をタブ選択時用に作成した画像に変更しています。

▼サンプル01（CSS部分）

#container{
    width:500px;
    margin:50px auto;
}
ul.tab{
    padding:0;
}
ul.tab li{
    list-style-type:none;
    width:100px;
    height:40px;
    float:left;
}
ul.tab li a{
    outline:none;
    background:url("./images/tab.jpg");
    display:block;
    color:blue;
    line-height:40px;
    text-align:center;
}
ul.tab li a.selected{
    background:url("./images/tab_selected.jpg");
    text-decoration:none;
    color:#333;
    cursor:default;
}
ul.panel{
    clear:both;
    border:1px solid #9FB7D4;
    border-top:none;
    padding:0;
}
ul.panel li{
    list-style-type:none;
    padding:10px;
    text-indent:1em;
    color:#333;
}

　スクリプト部分は次のようになります。

▼サンプル01（スクリプト部分）

$(function(){
    $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide()
    $("ul.tab li a").click(function(){
        $("ul.tab li a").removeClass("selected")
        $(this).addClass("selected")
        $("ul.panel li").hide()
        $($(this).attr("href")).show()
        return false
    })
})

　1行ずつ処理の内容を見ていきましょう。最初の命令（2行目）では、タブパネルの初期表示状態を設定しています。HTMLとCSSの設定だけではすべてのパネル部分が展開した状態ですので、選択状態のパネル（a要素のclass属性が「selected」のタブに対応するパネル）以外をhide()を使って非表示にします。

$("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide()

　セレクターの記述がちょっと複雑で分かりにくいと思いますので、もう少し細かくして見てみましょう。$("ul.tab li a.selected").attr("href") は、「class属性『selected』が設定されているa要素」のhref属性を取得しています。先ほど用意したHTMLでは、最初のli要素内のa要素に「selected」classを付けました。最初のa要素のhref属性は「#tab1」なので、上のコードを実行するとjQueryは以下のように解釈します。

$("ul.panel li:not(#tab1)").hide()

　li要素の後に否定疑似クラスの:not()が付いていますので（関連記事）、この場合はid属性に「#tab1」が付いたパネル以外がhide()で非表示になります。

初期表示状態(左)はすべてのパネルが表示されている。スクリプトの処理で選択されたパネル以外を非表示にする(右)

　次に、タブがクリックされた際に発生するclickイベントを設定します。a要素に対してイベントを設定する場合は「return false」を忘れずに記述しておきましょう（関連記事）。

$("ul.tab li a").click(function(){
    (中略)
    return false
})

　タブがクリックされたときは、すべてのタブ（ul.tab li a）からclass属性「selected」を取り除き、クリックされたタブにclass属性「selected」を追加し直す処理を設定しています。これによって、クリックされたタブだけを選択状態（selected）に変更できます。

$("ul.tab li a").removeClass("selected")
$(this).addClass("selected")

　あわせてパネルの表示／非表示も切り替えます。すべてのパネルをいったんhide()で非表示に設定。$(this).attr("href") で、クリックされたa要素のhref属性の値を読み出し、値と同じ名前のid属性を持つパネルをshow()で表示します。これで、タブで選択されたパネルだけを表示できます。

$("ul.panel li").hide()
$($(this).attr("href")).show()

▼サンプル01（実行結果）

サンプル01の実行画面。タブをクリックするとパネルの表示が切り替わる

　タブパネルを作るポイントは、a要素のhref属性に#を付けたページ内リンクを設定し、パネルのid属性と紐付けている点です。タブパネルに限らず、jQueryでUIを作る上で広く応用が利く考え方ですので、ぜひ頭に入れておきましょう。