jQuery: タブパネルの作り方

jQueryでタブパネルを作ります。
上に表示されているタブをクリックすると、下のコンテンツが切り替わる仕様です。 動作サンプル、サンプルコード、コード解説の順番で記述しています。

動作サンプル

サンプルを別ページで開く

html


<div id="tp_all">
    <ul id="tp_tab">
        <li><a href="#tabA" class="selected">タブA</a></li>
        <li><a href="#tabB">タブB</a></li>
        <li><a href="#tabC">タブC</a></li>
    </ul>
    <ul id="tp_panel">
        <li id="tabA">
           Aの文章<br>
            Aの文章。Aの文章。Aの文章。Aの文章。Aの文章。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
            文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
        </li>
        <li id="tabB">
           Bの文章<br>
            この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
            文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
        </li>
        <li id="tabC">
           Cの文章<br>
            Cの文章。Cの文章。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
            文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
            この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
        </li>
    </ul>
</div>

CSS


ul {
    padding: 0px;
}
li {
    list-style-type: none;
}
#tp_all {
    width: 450px;
}
/* タブ部分 */
ul#tp_tab li {
    width: 150px;
    height: 35px;
    float: left;
}
ul#tp_tab li a {
    display: block;
    color: black;
    font-weight: bold;
    background: linear-gradient(to bottom, #ebebeb 45%,#d8d8d8 55%);
    line-height: 35px;
    text-align: center;
    text-decoration: none;
    border: solid 1px silver;
}
/* 選択されたタブ */
ul#tp_tab li a.selected {
    background: white;
}

/* パネル部分  */
ul#tp_panel {
    clear: both;
    border: solid 1px gray;
    padding: 0px;
}
ul#tp_panel li{
    padding: 5px;
}

JavaScript


$(document).ready(function(){
    
    // 最初のパネル以外は隠す
    $('ul#tp_panel li:not(:first)').hide();
    
    $('ul#tp_tab li a').on('click', function(){
        // クラス属性の削除と追加
        $('ul#tp_tab li a').removeClass('selected');
        $(this).addClass('selected');
        // パネルのhide()とshow()
        $('ul#tp_panel li').hide();
        var id = $(this).attr('href');
        $(id).show();
        return false;
    });
    
});

コード解説

htmlの構造


<div id="tp_all">
    <ul id="tp_tab">
        <li><a href="#tabA" class="selected">タブA</a></li>
        <li><a href="#tabB">タブB</a></li>
        <li><a href="#tabC">タブC</a></li>
    </ul>
    <ul id="tp_panel">
        <li id="tabA">Aのコンテンツ</li>
        <li id="tabB">Bのコンテンツ</li>
        <li id="tabC">Cのコンテンツ</li>
    </ul>
</div>

htmlでは、タブ部分とパネル部分を別々にして、ID属性で結びつけています。 そして、読み込み時には先頭のパネルのみを表示し、他のパネルは非表示とします。

クラス属性の削除と追加


// クラス属性の削除と追加
$('ul#tp_tab li a').removeClass('selected');
$(this).addClass('selected');

removeClass()でクラスを削除し、addClass()でクリックされた要素のみにクラスを追加します。

パネルの表示・非表示


// パネルのhide()とshow()
$('ul#tp_panel li').hide();
var id = $(this).attr('href');
$(id).show();

1行目で全てのパネルを非表示にします。 2行目はクリックされた要素のhref属性（つまりID値)を取得。 3行目でパネルを表示します。

jQuery入門