Bootstrap 4：两个菜单一个显示和一个活动菜单项

Question

我有一个很大的菜单，我需要分成的cols移动设备和桌面。 所以我把它放在周围：

<div class="col-xl-12 col-md-12 col-6 first-set-skills">
  Menu 1
</div>
<div class="col-xl-12 col-md-12 col-6 second-set-skills">
  Menu 2
</div>

问题是我需要它们都作为一个菜单。 从其中任何一项中选择一项应该只显示一个结果和一个活动菜单项。 但是因为我分开了菜单，它们在菜单中显示了两个活动项：

有没有办法让它们都作为一个菜单，即使它们被 div 分隔？

---

这是 JSFiddle： https ://jsfiddle.net/prozik/qLu9pfje/12/

这是我遵循的导航（垂直）的引导程序文档： https : //getbootstrap.com/docs/4.0/components/navs/

这是代码：

<!-- menu 1 -->
<div class="col-xl-12 col-md-12 col-6">
  <div class="nav flex-column nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
  <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
  <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>


<!-- menu 2 -->
<div class="col-xl-12 col-md-12 col-6">
   <div class="nav flex-column nav flex-column nav-pills"  role="tablist" aria-orientation="vertical">
    <a class="nav-link active" id="v-pills-about-tab" data-toggle="pill" href="#v-pills-about" role="tab" aria-controls="v-about-home" aria-selected="true">About</a>
    <a class="nav-link" id="v-pills-company-tab" data-toggle="pill" href="#v-pills-company" role="tab" aria-controls="v-pills-company" aria-selected="false">Company</a>
    <a class="nav-link" id="v-pills-carreers-tab" data-toggle="pill" href="#v-pills-carreers" role="tab" aria-controls="v-pills-carreers" aria-selected="false">Careers</a>
    <a class="nav-link" id="v-pills-location-tab" data-toggle="pill" href="#v-pills-location" role="tab" aria-controls="v-pills-location" aria-selected="false">Location</a>
  </div>
</div>



<div class="tab-content" id="v-pills-tabContent">
  <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> Home content </div>
  <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> Profile  content</div>
  <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> Message content </div>
  <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"> Settings  content</div>
  <div class="tab-pane fade" id="v-pills-about" role="tabpanel" aria-labelledby="v-pills-about-tab"> About  content</div>
  <div class="tab-pane fade" id="v-pills-company" role="tabpanel" aria-labelledby="v-pills-company-tab-tab"> Company  content</div>
  <div class="tab-pane fade" id="v-pills-carreers" role="tabpanel" aria-labelledby="v-pills-carreers-tab"> Carreers  content</div>
  <div class="tab-pane fade" id="v-pills-location" role="tabpanel" aria-labelledby="v-pills-location-tab"> Location  content</div>
</div>

Answer 1

有一个 jQuery hack 来获得所需的输出，

添加

var $ = 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");
  });
})

并将 id 添加到nav-pills div。 检查代码段

 var $ = 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"); }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/> <!-- Bootstrap docs: https://getbootstrap.com/docs --> <div class="container"> <!-- menu 1 --> <div class="col-xl-12 col-md-12 col-6"> <div class="nav flex-column nav flex-column nav-pills" role="tablist" aria-orientation="vertical" id="tabGroupOne"> <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a> </div> </div> <!-- menu 2 --> <div class="col-xl-12 col-md-12 col-6"> <div class="nav flex-column nav flex-column nav-pills" role="tablist" aria-orientation="vertical" id="tabGroupTwo"> <a class="nav-link" id="v-pills-about-tab" data-toggle="pill" href="#v-pills-about" role="tab" aria-controls="v-about-home" aria-selected="true">About</a> <a class="nav-link" id="v-pills-company-tab" data-toggle="pill" href="#v-pills-company" role="tab" aria-controls="v-pills-company" aria-selected="false">Company</a> <a class="nav-link" id="v-pills-carreers-tab" data-toggle="pill" href="#v-pills-carreers" role="tab" aria-controls="v-pills-carreers" aria-selected="false">Careers</a> <a class="nav-link" id="v-pills-location-tab" data-toggle="pill" href="#v-pills-location" role="tab" aria-controls="v-pills-location" aria-selected="false">Location</a> </div> </div> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> Home content </div> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> Profile content</div> <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> Message content </div> <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"> Settings content</div> <div class="tab-pane fade" id="v-pills-about" role="tabpanel" aria-labelledby="v-pills-about-tab"> About content</div> <div class="tab-pane fade" id="v-pills-company" role="tabpanel" aria-labelledby="v-pills-company-tab-tab"> Company content</div> <div class="tab-pane fade" id="v-pills-carreers" role="tabpanel" aria-labelledby="v-pills-carreers-tab"> Carreers content</div> <div class="tab-pane fade" id="v-pills-location" role="tabpanel" aria-labelledby="v-pills-location-tab"> Location content</div> </div> </div>