Bootstrap 3，多个导航来控制单个选项卡窗格

Question

我想使用多组导航按钮来控制单个选项卡窗格。当前，当在另一个导航组中激活新导航时，不会停用先前的导航。因此，在任何给定时间都会激活两个导航按钮。

第一个导航菜单：

<!-- Nav Menu 1 -->             
            <ul class="nav nav-pills nav-stacked" id="myTab"> 
                <li class="active"><a href="#tab-1" data-toggle="tab">TAB ONE</a></li>
                <li><a href="#tab-2" data-toggle="tab">TAB TWO</li>
                <li><a href="#tab-3" data-toggle="tab">TAB THREE</li></ul>

第二个导航菜单：

 <!-- Nav Menu 2 -->                
            <ul class="nav nav-pills nav-stacked" id="myTab"> 
                <li><a href="#tab-4" data-toggle="tab">TAB FOUR</a></li>
                <li><a href="#tab-5" data-toggle="tab">TAB FIVE</li>
                <li><a href="#tab-6" data-toggle="tab">TAB SIX</li> </ul>

以及选项卡面板：

<div class="tab-content" id="myTab">
   <div class="tab-pane fade in active" id="tab-1">
       <p>TAB ONE CONTENT</p>
   </div>
   <div class="tab-pane fade in active" id="tab-2">
       <p>TAB TWO CONTENT</p>
   </div>
   <div class="tab-pane fade in active" id="tab-3">
       <p>TAB THREE CONTENT</p>
   </div>
   <div class="tab-pane fade in active" id="tab-4">
       <p>TAB FOUR CONTENT</p>
   </div>
   <div class="tab-pane fade in active" id="tab-5">
       <p>TAB FIVE CONTENT</p>
   </div>
   <div class="tab-pane fade in active" id="tab-6">
       <p>TAB SIX CONTENT</p>
   </div>

同样，这些按钮可以正确控制选项卡面板，但是当单击另一个导航中的一个时，前一个导航按钮不会停用 div。

Answer 1

根据我从问题中了解到的情况，如果您单击第二组，则需要从第一组中删除 class="active" link，反之亦然。我使用快速而肮脏的 Javascript 函数实现了这一点：

Html:

<ul class="nav nav-pills nav-stacked" id="tabGroupOne"> 
  <li class="active"><a href="#tab-1" data-toggle="tab">TAB ONE</a></li>
  <li><a href="#tab-2" data-toggle="tab">TAB TWO</a></li>
  <li><a href="#tab-3" data-toggle="tab">TAB THREE</a></li>
</ul> 

<ul class="nav nav-pills nav-stacked" id="tabGroupTwo"> 
  <li><a href="#tab-4" data-toggle="tab">TAB FOUR</a></li>
  <li><a href="#tab-5" data-toggle="tab">TAB FIVE</a></li>
  <li><a href="#tab-6" data-toggle="tab">TAB SIX</a></li> 
</ul>

Javascript/jQuery:

$("#tabGroupTwo").children().click(function(e){
  $("#tabGroupOne").children().each(function(f){
    $(this).removeClass("active");
  });
});

$("#tabGroupOne").children().click(function(e){
  $("#tabGroupTwo").children().each(function(f){
    $(this).removeClass("active");
  });
});

基本上，当您单击列表一中的任何 <li> 项目时，它将删除第二组中任何 link 的活动 class。单击第二组中的任何 link 反之亦然。

另一种方法是在单击 any link 时禁用所有其他 ul class="nav nav-pills" 子级，但只要保持导航，以上就足够了最多两个。

请注意，您还有一些 html 标记问题：多个 ID 和缺少 </a> 标记。这些也可能导致您的代码行为异常。

这是工作版本：

Bootply

Bootstrap 3，多个导航来控制单个选项卡窗格

Boostrap 3, Multiple Nav to control single Tab-Pane

javascript

jquery

html

twitter-bootstrap

unify