クリエイターのためのWebテク講座 -タブUIを作ろう（1）

今回は、前回のアコーディオン同様、頻繁に見かけるであろう、タブUIを作ってみましょう。

タブのUIを用意する。

タブの作りですが、ボタンと表示エリアそれぞれを用意します。あとは下のように、ボタンと表示エリアのマージンを0にして、くっつけてしまえばタブのように見えます。

あとはこの考え方のもと、横並びのタブボタンを用意してやればOKですね。一番簡単なHTMLの組み方は、ボタンをフローとさせるエリアと表示エリアを置いておくボックスを上下で分けてしまうことです。

それらを踏まえ、HTMLの記述を見てみましょう。

<div onClick="openFunc(1);" id="button1" class="tabButton">タブ1</div>
<div onClick="openFunc(2);" id="button2" class="tabButton">タブ2</div>
<div onClick="openFunc(3);" id="button3" class="tabButton">タブ3</div>

<div style="position:relative; clear:both;">
    <div id="box1" class="box"><p style="margin-top:250px; text-align:ce    nter; font-size:36px;">box1</p></div>
    <div id="box2" class="box"><p style="margin-top:250px; text-align:ce    nter; font-size:36px;">box2</p></div>
    <div id="box3" class="box"><p style="margin-top:250px; text-align:ce    nter; font-size:36px;">box3</p></div>
</div>

タブのボタンは「tabButton」とし、当該クラスに「float:left;」を指定。表示エリアを囲むボックスを用意し、その中で「clear:both;」をかけます。各表示エリアは、「position:absolute」で、左右の位置を0に設定し、同じサイズの3つの要素が重なるようにします。

下記の図のようなイメージです。

あとは、表示対象のタブ以外を非表示にしておきましょう。

タブの切り替えを実装する。

次にタブの切り替えを実装しましょう。とはいえ、これはとても簡単です。言葉にしてしまうと、ボタンを押すたびに対象の表示エリアを表示し、それ以外を非表示にしてしまえばいいのです。では早速コード解説しましょう。

function openFunc(value)
{
    var target = "#box" + value;

    $("#box1").css("display" , "none");
    $("#box2").css("display" , "none");
    $("#box3").css("display" , "none");

    $(target).css("display" , "block");
}

まず、各タブボタンのonClickで「openFunc(value);」を実行し、引数にタブ番号を渡します。タブ番号とID名は命名規則で関連付けているので、引数で渡された値で、どのタブが対象になるのかが分かります。あとは、一旦全ての表示エリアを非表示にして、最後の処理で、クリックされた対象のタブを「display:block」に指定します。

如何でしたか？これからは、タブのUIを実装する際に、わざわざライブラリを探しに行く必要はありませんね。次回は、「z-index」を使って、タブ切り替えの際に、フェードさせたりしてみましょう。