Javascript 引导程序3:三重嵌套选项卡错误
我的页面中有一个三重嵌套选项卡。每当我激活中间标记时，即使我从第一个选项卡单击到另一个选项卡上，它也会保持激活状态。下面是JSFIDLE中的一个示例 例如：Javascript 引导程序3:三重嵌套选项卡错误,javascript,twitter-bootstrap,twitter-bootstrap-3,Javascript,Twitter Bootstrap,Twitter Bootstrap 3,我的页面中有一个三重嵌套选项卡。每当我激活中间标记时，即使我从第一个选项卡单击到另一个选项卡上，它也会保持激活状态。下面是JSFIDLE中的一个示例 例如： 尝试点击Acquisition然后点击All Device然后点击Facebook 单击第一行的Engagement选项卡 最后一行不停用 第二个例子： 尝试点击Acquisition然后点击All Device然后点击Facebook 单击第二行的Desktop选项卡 最后一行不停用 您提供的第一个示例可以通过将导航选项卡和选项
- 尝试点击
然后点击Acquisition
然后点击All DeviceFacebook - 单击第一行的
选项卡Engagement - 最后一行不停用
- 尝试点击
然后点击Acquisition
然后点击All DeviceFacebook - 单击第二行的
选项卡Desktop - 最后一行不停用
- 您提供的第一个示例可以通过将导航选项卡和选项卡内容包含在tabbable类下来解决。试着这样做：
仪表板
-
-
-
-
-
-
-
-
-
-
-
-
所有设备所有采集
全设备GAMEFUSE采集
facebook收购的所有设备
全设备空门采集
全设备雅虎收购
订婚标签
保留标签
收入标签
- 对于第二个提到的问题，您没有为桌面和移动选项卡提供选项卡内容
- 您提供的第一个示例可以通过将导航选项卡和选项卡内容包含在tabbable类下来解决。试着这样做：
仪表板
-
-
-
-
-
-
-
-
-
-
-
-
所有设备所有采集
全设备GAMEFUSE采集
facebook收购的所有设备
全设备空门采集
全设备雅虎收购
订婚标签
保留标签
收入标签
- 对于第二个提到的问题，您没有为桌面和移动选项卡提供选项卡内容
<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>