[英]Bootstrap 3: Nested tab
我试图在选项卡中放置一个选项卡,但每当我单击一个内部嵌套选项卡时,整个内部嵌套选项卡行就会消失。 这是jsfiddle中的一个例子
尝试点击“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>
您的内部选项卡应该使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.