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

Question

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

    <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 列表中以前事件的选项卡都停用，无论单击了什么选项卡，并且只有最后一次单击的选项卡应该处于事件状态。

感谢大家的帮助!

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/