javascript - Bootstrap 3：嵌套选项卡

Question

我正在尝试将选项卡放在选项卡内，但是每当我单击内部嵌套选项卡时，整个内部嵌套选项卡行都会消失。这是 jsfiddle 中的一个示例

http://jsfiddle.net/jNWMY/1/

尝试点击“Acquisitions/Facebook”标签。您会注意到第二行选项卡消失了。

这是我的代码

<h1> Dashboard </h1>

<ul class="nav nav-tabs" id="dashboard_tabs">
    <li><a href="#acquisition_tab" data-toggle="tab"><b>Acquisition</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></li>
    <li><a href="#engagement_tab" data-toggle="tab">Engagement</a></li>
    <li><a href="#retention_tab" data-toggle="tab">Retention</a></li>
    <li><a href="#revenue_tab" data-toggle="tab">Revenue</a></li>
</ul>

<div class="tab-content">

    <div id="acquisition_tab" class="tab-pane">
        <ul class="nav nav-tabs" id="dashboard_tabs">
            <li><a href="#all_acquisition_tab" data-toggle="tab"><b>All</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></li>
            <li><a href="#facebook_acquisition_tab" data-toggle="tab"><b>Facebook</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></a></li>
            <li><a href="#yahoo_acquisition_tab" data-toggle="tab"><b>Yahoo</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></a></li>
        </ul>
    </div>

    <div id="engagement_tab" class="tab-pane">
        <p> Engagement tab </p>
    </div>

    <div id="retention_tab" class="tab-pane">
        <p> Retention tab </p>
    </div>

    <div id="revenue_tab" class="tab-pane">
        <p> Revenue tab </p>
    </div>

    <div id="all_acquisition_tab" class="tab-pane">
        <p> All acquisition </p>
    </div>  

    <div id="facebook_acquisition_tab" class="tab-pane">
        <p> All acquisition </p>
    </div>

    <div id="yahoo_acquisition_tab" class="tab-pane">
        <p> All acquisition </p>
    </div>  

</div>

Answer 1

您的内部选项卡应包含在带有tab-content类的 div 中。

试试这个...

<h1> Dashboard </h1>

<ul class="nav nav-tabs" id="dashboard_tabs">
    <li><a href="#acquisition_tab" data-toggle="tab"><b>Acquisition</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></li>
    <li><a href="#engagement_tab" data-toggle="tab">Engagement</a></li>
    <li><a href="#retention_tab" data-toggle="tab">Retention</a></li>
    <li><a href="#revenue_tab" data-toggle="tab">Revenue</a></li>
</ul>
<div class="tab-content">
    <div id="acquisition_tab" class="tab-pane">
        <ul class="nav nav-tabs" id="dashboard_tabs">
            <li><a href="#all_acquisition_tab" data-toggle="tab"><b>All</b><span style="color:red">(-30%)</span> <br> Total Installs</a></li>
            <li><a href="#facebook_acquisition_tab" data-toggle="tab"><b>Facebook</b><span style="color:red">(-30%)</span> <br> Total Installs</a></a></li>
            <li><a href="#yahoo_acquisition_tab" data-toggle="tab"><b>Yahoo</b><span style="color:red">(-30%)</span> <br> Total Installs</a></a></li>
        </ul>
    </div>
    <div id="engagement_tab" class="tab-pane">
        <p>Engagement tab</p>
    </div>
    <div id="retention_tab" class="tab-pane">
        <p>Retention tab</p>
    </div>
    <div id="revenue_tab" class="tab-pane">
        <p>Revenue tab</p>
    </div>
    <div class="tab-content">
        <div id="all_acquisition_tab" class="tab-pane">
            <p>All acquisition</p>
        </div>
        <div id="facebook_acquisition_tab" class="tab-pane">
            <p>All acquisition</p>
        </div>
        <div id="yahoo_acquisition_tab" class="tab-pane">
            <p>All acquisition</p>
        </div>
    </div>
</div>