Bootstrap 3：嵌套选项卡

Question

我试图在选项卡内放置一个选项卡，但每当我单击一个内部嵌套选项卡时，整个内部嵌套选项卡行就会消失。这里是在的jsfiddle

尝试点击 “收购/脸谱” 选项卡的例子。您会注意到第二行标签消失。

这里是我的代码

<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类股利。

尝试......

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