jQueryのみでタブメニューを作る

作成＆ソース

無いのなら、作ってしまえホトトギスと言うことで、簡易タブメニューを作成した。

稼働サンプル

使用しているのはjQueryでの表示切り替えと、外部CSSである。

HTML

対象部分のHTMLタグは下記のようになっている。

<ul id="tab_list">
    <li id="p_tab">personal</li>
    <li id="d_tab">diary</li>
    <li id="b_tab">bookmark</li>
</ul>
<div id="personal" class="tab_body">中身1</div>
<div id="rss" class="tab_body">中身2</div>
<div id="bookmark" class="tab_body">中身3</div>

ulタグの中のliタグをタブのメニューとして設定している。
その下のdivタグで囲まれた3つのコンテンツがタブの中身となっている。
それをCSSで以下のように成形している
（firefoxやsafariで角丸に見える部分は排除してあります）。

ULタグ

#tab_list{
    line-height:1em;
    margin:0;
    margin-left:1em;
    margin-bottom:1px;
    position:relative;
    z-index:0;
}

タブの縦の長さを1文字分にして左と下を少し開け位置を相対位置として配置。
下を1pxあけないとタブが本文部分に1px分食い込んでしまうので要注意。
Firefox3.xのみ1pxあけてもまだ食い込んでいるので、位置表示を相対化して後ろに配置している。

LIタグ

LIタグは1つのみタブ内と同じ色で表示して、残りは非選択と言うことが分かるように別の色にしなければならない。

#tab_list li{
    display:inline;
    background-color:white;
    padding:0 4px;
    margin:0 0.1em;
}

リスト要素をインライン化し、背景を白塗りにした後、要素の左右を4pxずつ空ける
左右をあけない場合はpaddingを指定しないこと。
また、要素内が一杯に見えないよう左右を0.1文字ずつ広げておく。
この辺は完全に趣味というかデザインの問題のため、趣味で設定下さい。

ul li#d_tab{background-color:#aabbff;}
ul li#b_tab{background-color:#aabbff;}

現在選択されているタブ以外の2つのタブの色をCSSで変更して、
選択されていないことが分かるようにしている。
この色に関してもデザインの問題なので、趣味で設定下さい。

タブデザイン

.tab_body{
    background-color:white;
    padding:10px;
    position:relative;
    z-index:1;
}

コンテンツ本体の背景色を選択されているタブと同じ色に設定している。
また、コンテンツの位置も相対表示とした後に
Firefox3.xでの表示位置の対策としてタブより前に表示されるようにZ軸の指定を行っている

#rss{display:none;}
#bookmark{display:none;}

display:noneを使用して選択されていないブロック要素を非表示としている。
ここまでのHTMLとCSSの設定で切替の出来ないタブメニューとコンテンツの表示は完成です。
外見だけならタブメニューが設定されているように見えます。
後は、jQueryを使って料理していきます。

jQuery

jQueryを使用してCSSの切替を行い、いかにもタブ切替をしているように見せかけます。
下記のスクリプトはタブ一つ分の命令です。

<script type="text/javascript">
$(function(){
    $("#p_tab").click(function (){
        $("#p_tab").css("background-color","white");
        $("#d_tab").css("background-color","#aabbff");
        $("#b_tab").css("background-color","#aabbff");
        $("#personal").css("display","block");
        $("#rss").css("display","none");
        $("#bookmark").css("display","none");
    });
});
</script>

$(”#p_tab”).click(function ()でidがp_tabの要素がクリックされた場合に
下記の内容のjQueryが実行されます。
$(”#p_tab”).css(”background-color”,”white”);でクリックされたp_tabの背景を白に
$(”#d_tab”).css(”background-color”,”#aabbff”);と
$(”#b_tab”).css(”background-color”,”#aabbff”);で
残りのタブの背景を非選択色に変更しています。
$(”#personal”).css(”display”,”block”);でidがpersonalのコンテンツ要素を表示
$(”#rss”).css(”display”,”none”);と$(”#bookmark”).css(”display”,”none”);は
現在どのタブが選択されているか分からないため、残りのコンテンツ内容を非表示にしています。
このスクリプトを残りのタブ要素用にも適用することで完成となります。

完成版スクリプト

<script type="text/javascript">
$(function(){
    $("#p_tab").click(function (){
        $("#p_tab").css("background-color","white");
        $("#d_tab").css("background-color","#aabbff");
        $("#b_tab").css("background-color","#aabbff");
        $("#personal").css("display","block");
        $("#rss").css("display","none");
        $("#bookmark").css("display","none");
    });
    $("#d_tab").click(function (){
        $("#p_tab").css("background-color","#aabbff");
        $("#d_tab").css("background-color","white");
        $("#b_tab").css("background-color","#aabbff");
        $("#personal").css("display","none");
        $("#rss").css("display","block");
        $("#bookmark").css("display","none");
    });
    $("#b_tab").click(function (){
        $("#p_tab").css("background-color","#aabbff");
        $("#d_tab").css("background-color","#aabbff");
        $("#b_tab").css("background-color","white");
        $("#personal").css("display","none");
        $("#rss").css("display","none");
        $("#bookmark").css("display","block");
    });
});
</script>

補足

タブメニューと言っていますが、実際には最初に全ての要素を読み込んで、
非選択タブの色を変更し、コンテンツを非表示にすることで擬似的にタブを再現しています。

タブをクリックした際に
タブの色の変更・選択されたコンテンツを表示・選択されていないコンテンツを非表示
と言う3つの動作をjQueryで実行しています。

一番苦労したのはFirefoxの挙動2.x系統と3.x系統で変更されているため、
3.x系統での挙動に合わせてZ軸調節を行っていること。

確認環境

• WinXP + IE7.0
• WinXP + Firefox3.0x
• WinXP + GoogleChrome
• MacOSX + Safari3.x
• MacOSX + Safari4.x
• MacOSX + Firefox3.0x

なお、3.xをベースにして開発したためにFirefox2.xでは1px離れて見えますが、
今後増えることのない古いブラウザと言うことで無視しています。

Nintendo NEXUS Ura