Bootstrap 3:嵌套选项卡 [英] Bootstrap 3: Nested tab

查看：32
本文介绍了Bootstrap 3:嵌套选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

尝试点击收购/Facebook"标签.您会注意到第二行标签消失了.

这是我的代码

仪表板</h1><ul class="nav nav-tabs" id="dashboard_tabs"><li><a href="#acquisition_tab" data-toggle="tab"><b>获取</b><span style="color:red">(-30%)</span><br>总安装量</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><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>总安装量</a></li><li><a href="#facebook_acquisition_tab" data-toggle="tab"><b>Facebook</b><span style="color:red">(-30%)</span><br>总安装量<li><a href="#yahoo_acquisition_tab" data-toggle="tab"><b>雅虎</b><span style="color:red">(-30%)</span><br>总安装量

<div id="engagement_tab" class="tab-pane"><p>参与选项卡 </p>

<div id="retention_tab" class="tab-pane"><p>保留标签</p>

<div id="revenue_tab" class="tab-pane"><p>收入标签 </p>

<div id="all_acquisition_tab" class="tab-pane"><p>所有收购</p>

<div id="facebook_acquisition_tab" class="tab-pane"><p>所有收购</p>

<div id="yahoo_acquisition_tab" class="tab-pane"><p>所有收购</p>

解决方案

你的内部标签应该用 tab-content 类包裹在一个 div 中.

试试这个...

仪表板</h1><ul class="nav nav-tabs" id="dashboard_tabs"><li><a href="#acquisition_tab" data-toggle="tab"><b>获取</b><span style="color:red">(-30%)</span><br>总安装量</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><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%)</跨度><br>总安装量</a></li><li><a href="#facebook_acquisition_tab" data-toggle="tab"><b>Facebook</b><span style="color:red">(-30%)</跨度><br>总安装量<li><a href="#yahoo_acquisition_tab" data-toggle="tab"><b>雅虎</b><span style="color:red">(-30%)</跨度><br>总安装量
<div id="engagement_tab" class="tab-pane"><p>参与选项卡</p>
<div id="retention_tab" class="tab-pane"><p>保留标签</p>
<div id="revenue_tab" class="tab-pane"><p>收入标签</p>
<div class="tab-content"><div id="all_acquisition_tab" class="tab-pane"><p>所有采集</p>
<div id="facebook_acquisition_tab" class="tab-pane"><p>所有采集</p>
<div id="yahoo_acquisition_tab" class="tab-pane"><p>所有采集</p>

I am trying to put a tab inside of a tab, but whenever I click a inner nested tab, the entire inner nested tab row goes away. Here is an example in a jsfiddle

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

Try clicking "Acquisitions/Facebook" tab. You will notice the second row of tabs just disappear.

Here is my code

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

解决方案

Your inner tabs should be wrapped in a div with the tab-content class.

Try this...

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

这篇关于Bootstrap 3:嵌套选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆