twitter-bootstrap - タブ内にタブを持つ BootStrap

Question

タブ内にタブを持たせようとしていますが、うまくいきました。問題は、あるタブから別のタブに切り替えてからサブタブのあるタブに戻ると、サブタブのアクティブなタブに本来あるべきものが表示されない(空白)ことです。

使用したコードは次のとおりです。

 <div class="container">
    <ul class="nav nav-tabs" data-tabs="tabs" id="tabs">
        <li class="active">
            <a data-toggle="tab" href="#red">Red</a>
        </li>

        <li>
            <a data-toggle="tab" href="#orange">Orange</a>
        </li>

        <li>
            <a data-toggle="tab" href="#yellow">Yellow</a>
        </li>

        <li>
            <a data-toggle="tab" href="#green">Green</a>
        </li>

        <li>
            <a data-toggle="tab" href="#blue">Blue</a>
        </li>
    </ul>

    <div class="tab-content" id="my-tab-content">
        <div class="tab-pane active" id="red">
            <ul class="nav nav-tabs" data-tabs="tabs" id="tabs2">
                <li class="active">
                    <a data-toggle="tab" href="#red2">Red2</a>
                </li>

                <li>
                    <a data-toggle="tab" href="#orange2">Orange2</a>
                </li>

                <li>
                    <a data-toggle="tab" href="#yellow2">Yellow2</a>
                </li>

                <li>
                    <a data-toggle="tab" href="#green2">Green2</a>
                </li>

                <li>
                    <a data-toggle="tab" href="#blue2">Blue2</a>
                </li>


            </ul>

                    <div class="tab-content" id="my-tab-content">
                        <div class="tab-pane active" id="red2">
                            RED 2
                        </div>

                        <div class="tab-pane" id="orange2">
                            ORANGE 2
                        </div>
                    </div>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>

            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>

            <p>yellow yellow yellow yellow yellow</p>
        </div>

        <div class="tab-pane" id="green">
            <h1>Green</h1>

            <p>green green green green green</p>
        </div>

        <div class="tab-pane" id="blue">
            <h1>Blue</h1>

            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>