Bootstrap nav、nav pills、nav stacked 对于两个 UL 列表是独立的。

Question

我有以下代码，div 内有两个 ul 元素，每个元素都有导航、导航丸、导航堆叠 class。

    <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 class 是独立的。当我 select 来自一组 UL li 的选项卡时，先前 select 来自其他 UL li 的活动选项卡不会停用或丢失 'active' css class .

我怎样才能让他们依赖。我希望两个 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 to catch when a tab is activated and manually deactivate the tabs in the linked list. I set up a jsfiddle to give you an example of what I mean: https://jsfiddle.net/az329fuw/

Bootstrap nav、nav pills、nav stacked 对于两个 UL 列表是独立的。

Bootstrap nav, nav pills, nav stacked is independent for two UL lists.

html

css

navigation

jquery

twitter-bootstrap