javascript - jumbotron - tooltip html bootstrap

Bootstrap 3: pestaña anidada

Question

Intento poner una pestaña dentro de una pestaña, pero cada vez que hago clic en una pestaña anidada interna, la fila de pestañas anidadas internas se va. Aquí hay un ejemplo en jsfiddle

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

Intente hacer clic en la pestaña "Adquisiciones / Facebook". Notarás que la segunda fila de pestañas simplemente desaparece.

Aquí está mi código

<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

Sus pestañas internas deben estar envueltas en un div con la clase de tab-content .

Prueba esto...

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