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>

• 對於第二個提到的問題，您沒有為桌面和移動標簽提供標簽內容