Question

我对twitter bootstrap很新，并继承了我正在尝试调试的项目。我的问题是，我有一个嵌套在导航栏中的下拉菜单。下拉菜单中的项目对应于某些选项卡式内容。我希望该下拉列表中的第一项默认为激活以及相应的选项卡内容。我可以让它工作，但问题是当点击不同的菜单项时，初始项目仍然“活动”。只有在点击第3项后，第1 /默认项才会被正确停用。

这是代码和JSFiddle。

<div id="content" class="container">
    <div template="header" id="header">
        <div class="navbar">
            <div class="navbar-inner">
                <ul class="nav">
                    <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Stats <b class="caret"></b></a>

                        <ul class="dropdown-menu">
                            <li class="active"><a href="#lastday" id="id_day" data-toggle="tab">Last 24 hours</a>
                            </li>
                            <li class=""><a href="#sevendays" id="id_week" data-toggle="tab">Last 7 days</a>
                            </li>
                            <li class=""><a href="#thirtydays" id="id_month" data-toggle="tab">Last 30 days</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div template="dash" class="tab-content">
        <div class="tab-pane  main-content" id="sevendays">
            <div class="offset1 span4">
                <h2>7 Days</h2>
            </div>
        </div>
        <div class="tab-pane  main-content" id="thirtydays">
            <div class="offset1 span4">
                <h2>30 Days</h2>
            </div>
        </div>
        <div class="tab-pane  main-content active" id="lastday">
            <div class="offset1 span4">
                <h2>24 Hours</h2>
            </div>
        </div>
    </div>
</div>

http://jsfiddle.net/hKQA8/

请注意当您单击STATS时，如何选择7天内容以及相关选项卡。如果您随后单击24小时，其关联的选项卡将被选中。但是，如果您返回下拉列表，您将看到7天和24小时都保持突出显示/活动状态。只有在点击第3项后，才会开始正常工作。

Answer 1

所以我的老板花了一些时间和我一起看这个，他提出了解决方案。事实证明，因为选项卡菜单嵌套在另一个菜单下，您必须将该父菜单的项目设置为“活动”，然后问题消失。这是更新的JSFiddle，以防其他人遇到此问题。

<li class="dropdown active">

http://jsfiddle.net/hKQA8/3/

Bootstrap活动选项卡未正确停用

1 个答案: