javascript - Bootstrap 3：三重嵌套选项卡错误

Question

我的页面中有一个三重嵌套选项卡。每当我激活中间标签时，即使我从第一个选项卡单击到另一个选项卡，它也会保持激活状态。这是 jsfiddle 中的一个示例。

http://jsfiddle.net/jNWMY/2/

例如：

• Acquisition然后尝试All Device点击Facebook
• 单击Engagement第一行中的选项卡
• 底行不会停用

第二个例子：

• Acquisition然后尝试All Device点击Facebook
• 单击Desktop第二行中的选项卡
• 底行不会停用

Answer 1

• 您提供的第一个示例可以通过在 tabbable 类下包含 nav-tabs 和 tab-content 来解决。试试这样：

jsfiddle

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

• 对于第二个提到的问题，您没有为桌面和移动选项卡提供选项卡内容