[ プログラミング ] シンプルなタブパネルをjQueryで作る方法

前回、dl定義リストを利用してタブパネルをjQueryで作ってみましたが、今回はよく使われている方法、つまり、メニュー部分をulリストタグを利用して、コンテンツ部分はdivタグを使って、シンプルなタブパネルをjQueryで実装してみたいと思います。

デモは以下からどうぞ。

DOMO

HTML5でコーティングしています。jQueryもCSSもHTMLのheadタグ内に書いています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>[DEMO]dl定義リストを利用してタブパネルをjQueryで作る方法</title>
<script src="js/jquery.js"></script>
<script>
$(function() {
    return $('.tabmenuWrap').each(function() {
        // 現在処理している要素を変数化
        var $wrap = $(this);

        // リンクをクリック
        $wrap.find('.tabmenu li a[deta-target^="#tab"]').click(function(){
            // 全てのタブの内容を非表示
            $wrap.find('.panel').hide();

            // クリックしたタブの内容を表示
            $wrap.find($(this).attr('deta-target')).show();

            // タブに設定されている「.selected」を削除
            $wrap.find('.tabmenu li').removeClass('selected');

            // クリックされたタブに「.selected」を追加
            $wrap.find($(this).parent('li')).addClass('selected');
        });

        // 最初のタブを表示
        $wrap.find('.tabmenu li a[deta-target^="#tab"]:first').trigger('click');
    });
});
</script>
<style>
.tabmenuWrap {
    width:600px;
    margin:30px auto;
}

.tabmenu {
    position:relative;
    margin:0;
    padding:0;
    overflow:hidden;
}

.tabmenu li {
    float:left;
    margin:0 2px 0 0;
    padding:0;
    background:#ddd;
    list-style:none;
}

.tabmenu li.selected {
    background:#eee;
}

.tabmenu li a {
    display:block;
    padding:5px 10px;
}

.tabmenu li a:hover {
    cursor:pointer;
}
.panel {
    clear:both;
    box-sizing:border-box;
    width:600px;
    padding:10px;
    background:#eee;
}
</style>
<style>
.tabmenu {
    position:relative;
    width:600px;
    margin:50px auto;
}

.tabmenu dt {
    float:left;
    margin:0 2px 0 0;
    padding:5px 10px;
    background:#ddd;
}

.tabmenu dt.selected {
    background:#eee;
}

.tabmenu dt:hover {
    cursor:pointer;
}

.tabmenu dd {
    position:absolute;
    box-sizing:border-box;
    width:600px;
    margin:0;
    padding:10px;
    background:#eee;
}
</style>
</head>
<body>
<div class="tabmenuWrap">
<ul class="tabmenu">
    <li><a deta-target="#tab1">メニュー1</a></li>
    <li><a deta-target="#tab2">メニュー2</a></li>
    <li><a deta-target="#tab3">メニュー3</a></li>
</ul>
<div id="tab1" class="panel">
    タブメニュー1の中身です。・・・
</div>
<div id="tab2" class="panel">
    タブメニュー2の中身です。・・・
</div>
<div id="tab3" class="panel">
    タブメニュー3の中身です。
</div>
</div><!-- /.tabmenuWrap -->

<div class="tabmenuWrap">
<ul class="tabmenu">
    <li><a deta-target="#tab1">メニュー1</a></li>
    <li><a deta-target="#tab2">メニュー2</a></li>
    <li><a deta-target="#tab3">メニュー3</a></li>
</ul>
<div id="tab1" class="panel">
    タブメニュー1の中身です。・・・
</div>
<div id="tab2" class="panel">
    タブメニュー2の中身です。・・・
</div>
<div id="tab3" class="panel">
    タブメニュー3の中身です。
</div>
</div><!-- /.tabmenuWrap -->
</body>
</html>

メニューとコンテンツ部分を紐付けるために、「data-target」という名前のカスタムデータ属性(独自データ属性)を作って、それを利用しています。aタグの「href」属性を使ってもよいのですが、別にスムーススクロールのJavaScriptコードなどを組み込んでいた場合、競合してしまってうまく動作しないので、新しくカスタムデータ属性を使っています。

また、同じクラス名のタブがあってもちゃんと別々に動作するように、繰り返し処理をするeach関数や「.find()」を使用しています。