Bootstrap导航，导航丸，导航堆叠对于两个UL列表是独立的。

Question

我在div中有两个ul元素的代码，其中包含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的活动选项卡不会失效或松散“活跃”＆＃39; css课。

我怎样才能让他们依赖。我希望UL列表中的先前活动选项卡都可以取消激活，无论单击哪个选项卡，并且唯一最后单击的选项卡应处于活动状态。

谢谢大家的帮助！

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