[英]Bootstrap 3: Triple nested tab error
I have a triple nested tab in my page. 我的页面中有一个三重嵌套选项卡。 Whenever I activate a middle tag, it stays activated even when I click out of the first tab onto another tab.
每当我激活中间标签时,即使我将第一个标签单击到另一个标签上,它也会保持激活状态。 Here is an example in a jsfiddle.
这是jsfiddle中的一个例子。
http://jsfiddle.net/jNWMY/2/ http://jsfiddle.net/jNWMY/2/
For example: 例如:
Acquisition
then All Device
then Facebook
Acquisition
,然后All Device
,然后Facebook
Engagement
tab in first row Engagement
选项卡 Second example: 第二个例子:
Acquisition
then All Device
then Facebook
Acquisition
,然后All Device
,然后Facebook
Desktop
tab in second row Desktop
选项卡 <div id="dashboard_container" style="padding-left:50px; padding-right:50px; padding-bottom:50px; padding-top:10px;">
<h1> Dashboard </h1>
<div class="tabbable">
<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">
<div class="tabbable">
<ul class="nav nav-tabs" id="acquisition_tabs">
<li> <a href="#all_device_acquisition_tab" data-toggle="tab">
<b>All Device</b>
<span style="color:red">(-30%)</span>
<br/> Total Installs
</a>
</li>
<li> <a href="#desktop_acquisition_tab" data-toggle="tab">
<b>Desktop</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
<li> <a href="#mobile_acquisition_tab" data-toggle="tab">
<b>Mobile</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
</ul>
<div class="tab-content">
<div id="all_device_acquisition_tab" class="tab-pane">
<div class="tabbable">
<ul class="nav nav-tabs" id="all_device_acquisition_tabs">
<li> <a href="#ad_all_acquisition_tab" data-toggle="tab">
<b>All</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
<li> <a href="#ad_gamefuse_acquisition_tab" data-toggle="tab">
<b>Gamefuse</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
<li> <a href="#ad_facebook_acquisition_tab" data-toggle="tab">
<b>Facebook</b>
<span style="color:red">(-30%)</span>
<br/> Total Installs
</a>
</li>
<li> <a href="#ad_kongregate_acquisition_tab" data-toggle="tab">
<b>Kongregate</b>
<span style="color:red">(-30%)</span>
<br/> Total Installs
</a>
</li>
<li> <a href="#ad_yahoo_acquisition_tab" data-toggle="tab">
<b>Yahoo</b>
<span style="color:red">(-30%)</span>
<br/> Total Installs
</a>
</li>
</ul>
<div class="tab-content">
<div id="ad_all_acquisition_tab" class="tab-pane">
<p>all device ALL Acquisition</p>
</div>
<div id="ad_gamefuse_acquisition_tab" class="tab-pane">
<p>all device GAMEFUSE Acquisition</p>
</div>
<div id="ad_facebook_acquisition_tab" class="tab-pane">
<p>all device facebook Acquisition</p>
</div>
<div id="ad_kongregate_acquisition_tab" class="tab-pane">
<p>all device kongregate Acquisition</p>
</div>
<div id="ad_yahoo_acquisition_tab" class="tab-pane">
<p>all device yahoo Acquisition</p>
</div>
</div>
</div>
</div>
</div>
</div>
</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>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.