BootStrap 在选项卡中包含选项卡答案

【问题标题】：BootStrap having tabs within tabsBootStrap 在选项卡中包含选项卡
【发布时间】：2025-07-08 20:20:01
【问题描述】：

我正在尝试在选项卡中添加选项卡，并且可以正常工作。问题是，当我从一个选项卡切换到另一个选项卡，然后返回到带有子选项卡的选项卡时，子选项卡活动选项卡不会显示它应该显示的内容（空白）。

这是我使用的代码：

 <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>

【问题讨论】：

你能提供一个jsfiddle吗？

标签： twitter-bootstrap tabs toggle

【解决方案1】：

要理解究竟你想要完成什么有点困难，但我相信这个 jsbin 示例实现了你所追求的行为。

http://jsbin.com/ucemay/1/

请注意，在您在原始问题中发布的源代码中，您有两个 div 元素具有相同的 id。

<div class="tab-content" id="my-tab-content">

这势必会导致某种问题。在 jsbin 示例中，我更改了内部 div 的 id 名称。

<div class="tab-content" id="my-tab-content-2">

【讨论】：