0

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

这是我使用的代码：

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

1 回答 1

1

有点难以理解您到底想要完成什么，但我相信这个 jsbin 示例实现了您所追求的行为。

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

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

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

这势必会导致这样或那样的问题。在 jsbin 示例中，我更改了idinner 的名称div。

<div class="tab-content" id="my-tab-content-2">
于 2013-06-09T21:20:16.007 回答