［jQuery］タブパネル①

Yaho!!の検索バーの真下に使われているようなタブパネルをつくります

まず、HTMLとCSSを書きましょう

［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">PHP</a></li>
</ul>
<ul class="panel">
<li id="tab1">Lorem ipsum dolor （中略） nec ligula. </li>
<li id="tab2">Nam cursus molestie erat, （中略） sed quis ipsum. </li>
<li id="tab3">Pellentesque in metus leo. （中略）pharetra eu, feugiat eu velit. </li>
<li id="tab4">Vestibulum a quam （中略）blandit vel ut erat. In hac . </li>
<li id="tab5">Vestibulum consequat （中略） suscipit porta. </li>
</ul>
</div>

タブとパネルをそれぞれunorder listで並べます。

タブのリンクは、＃に続きパネルのid名をつけます。（ここポイント）
※テキストの説明では「a要素のhref属性に＃をつけたページ内リンク」で、「パネルのid属性と紐づけている」のだそう。

［CSS］

html, body, div, ul, li, a {
    margin: 0;
    padding: 0;
}

#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("tab.jpg");
    display:block;
    color:blue;
    line-height:40px;
    text-align:center;
}

ul.tab li a.selected{
    background:url("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;
}

HTMLとCSSまで実装した状態　↓

［jQuery］

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

２行目：初期表示　クラス名selected以外のパネルを非表示にする
３行目：タブをクリックした場合の動作を以下のように設定する
４行目：クラス名selectedが付いているタブのクラス名を削除する
５行目：クリックしたタブ（ul.tab li a）にクラス名selectedを付与する
６行目：selected以外のパネルを非表示にする
７行目：クリックされたタブ（this）のa要素のhref属性を読み出し、値と同じid属性のパネルを表示する