Bootstrapで親子関係を表せる2段タブを実装してみた

スクリーンショット 2015-02-23 1.01.03
↑の画像のようにして1段目の親タブを表示させると、デフォルトで指定した2段目の子タブの中身が表示され、クリックで切り替えられる仕様で作ってみました。

デモはこんな感じ。

以下コード。使いたいサイトに合わせてご自由に変えて埋め込んで下さい。

HTMLのサンプル例 ※BootstrapとjQuery、及び後述のjavascript、cssコードも予め読み込んで下さい。

<ul class="nav nav-tabs parent-tab-content">
    <li><a href="#tab1" data-toggle="tab">親タブ1</a></li>
    <li class="active"><a href="#tab2" data-toggle="tab">親タブ2</a></li>
</ul>
<div class="tab-content">
    <!--親タブ1のメニュー-->
    <ul class="nav nav-tabs sub-tab-content" id="tab1">
        <!--各親タブの中でデフォルトで表示させたい子タブにactive属性を-->
        <li class="active"><a href="#child-tab1" data-toggle="tab">子タブ1</a></li>
        <li><a href="#child-tab2" data-toggle="tab">子タブ2</a></li>
        <li><a href="#child-tab5" data-toggle="tab">子タブ5</a></li>
    </ul>
    <!--親タブ2のメニュー-->
    <ul class="nav nav-tabs sub-tab-content" id="tab2">
        <li class="active"><a href="#child-tab3" data-toggle="tab">子タブ3</a></li>
        <li><a href="#child-tab4" data-toggle="tab">子タブ4</a></li>
        <li><a href="#child-tab5" data-toggle="tab">子タブ5</a></li>
    </ul>
    <div class="tab-pane fade" id="child-tab1">
        <p>タブ1の内容</p>
    </div>
    <div class="tab-pane fade" id="child-tab2">
        <p>タブ2の内容</p>
    </div>
    <div class="tab-pane fade" id="child-tab3">    
        <p>タブ3の内容</p>
    </div>
    <div class="tab-pane fade" id="child-tab4">
        <p>タブ4の内容</p>
    </div>
    <div class="tab-pane fade" id="child-tab5">
        <p>タブ5の内容</p>
    </div>
</div>

javascript(jQuery)はこちら。

    $(function(){
        activeTag = $('ul.parent-tab-content').find("li.active a").first();
        if (!activeTag) {
            activeTag = $('ul.parent-tab-content').find("li").first().find("a").first();
        }
        setActive(activeTag);
        $(activeTag.attr('href')).addClass('active');        
        
        $('ul.sub-tab-content a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            $(e.target).parent().parent().addClass("active");
            $(e.target).parent().addClass("active");
            $(e.relatedTarget).parent().removeClass("active");
        });
        $('ul.parent-tab-content a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            setActive($(e.target));
        });
        
        function setActive(targetObj) {
            targetMenuId = targetObj.attr("href");
            targetTabId = $(targetMenuId).find("li.active a").first().attr("href");
            if(!targetTabId){
                $(targetMenuId).find("li").first().addClass("active");
                targetTabId = $(targetMenuId).find("li").first().find("a").attr("href");
            }
            $(targetTabId).addClass('active').addClass('in');
        }
    });

最後にCSSはこちら。

    .tab-content ul.sub-tab-content{
        display: none;
    }
    .tab-content ul.sub-tab-content.active{
	display: block;
    }

コメントを残す

メールアドレスが公開されることはありません。