Bootstrap 导航、导航药丸、导航堆叠对于两个 UL 列表是独立的。答案

【问题标题】：Bootstrap nav, nav pills, nav stacked is independent for two UL lists.Bootstrap 导航、导航药丸、导航堆叠对于两个 UL 列表是独立的。
【发布时间】：2015-11-06 19:57:50
【问题描述】：

我有以下代码，其中 div 中有两个 ul elememts，每个都有 nav、nav-pills、nav-stacked 类。

    <div >  
    <ul class="nav nav-pills nav-stacked ">
        <li class="active"><a href="#allSection" data-target="#allSectionOptions" data-toggle="tab">All</a></li>
        <li ><a href="#pendingSection" data-target="#allSectionOptions" data-toggle="tab">Pending</a></li>
    </ul>

    <ul class="nav nav-pills nav-stacked ">
        <li ><a href="#khGroupSec" data-target="#groupSectionOptions" data-toggle="tab">Kindred Hospital</a></li>
        <li ><a href="#lhGroupSec" data-target="#groupSectionOptions" data-toggle="tab">Logan Heights</a></li>
    </ul>
    </div>

我的问题是这些选项卡的活动 css 类是独立的。当我从一组 UL li 中选择一个选项卡时，之前从其他 Ul li 中选择的活动选项卡不会停用或松动“活动”css 类。

我怎样才能让他们依赖。我希望两个 UL 列表中以前活动的选项卡都停用，而不管单击了哪个选项卡，并且唯一最后一次单击的选项卡应该是活动的。

感谢大家的帮助！

【问题讨论】：

标签： jquery html twitter-bootstrap css navigation

【解决方案1】：

我不确定您的情况是什么，或者您想要在标签的功能方面完成什么，但我有两种可能的解决方案。

首先，如果您不需要两个单独的，您可以简单地在列表之间添加一个可视分隔符。我相信，这将以您正在寻找的方式利用内置的 Bootstrap Tab 行为。

<ul class="nav nav-pills nav-stacked ">
    <li class="active"><a href="#allSection" data-target="allSection" data-toggle="tab">All</a></li>
    <li><a href="#pendingSection" data-target="pendingSection" data-toggle="tab">Pending</a></li>
    <li role="separator" class="divider">&nbsp;</li>
    <li><a href="#khGroupSec" data-target="khGroupSec" data-toggle="tab">Kindred Hospital</a></li>
    <li><a href="#lhGroupSec" data-target="lhGroupSec" data-toggle="tab">Logan Heights</a></li>
</ul>

其次，如果您需要在不同的位置，您可以使用Bootstrap Tab events 来捕捉标签何时被激活并手动停用链接列表中的标签。我设置了一个 jsfiddle 给你一个例子来说明我的意思：https://jsfiddle.net/az329fuw/

【讨论】：

第二种解决方案是完美的，我猜手动停用标签是解决方案。我看到了几个例子，其中这个功能是在独立的 ul 列表中自动实现的。 bootply.com/101379我不知道那里是怎么运作的。第一个解决方案不适用，因为根据所需的 UI 设计，我需要两个单独的 ul。感谢您的解决方案。