具有多个导航链接的引导可切换选项卡

Question

我需要一个 Bootstrap Toggable Tabs 的解决方案。我正在使用导航选项卡，如Bootstrap Toggable Tabs 所示。在我的场景中，我从多个位置触发视图。选项卡内容会发生变化，但两个导航链接的活动链接不会改变。我们能以某种方式使两个导航链接同步吗？

这是带有示例的 JSFiddle - https://jsfiddle.net/4n7rg3hy/

<div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
  <ul class="nav nav-tabs" id="myTabs" role="tablist">
    <li role="presentation" class=""><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" class="active" aria-expanded="false">Home</a></li>
    <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a></li>
    <li role="presentation" class=""><a href="#about" id="about-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="false">About</a></li>
    <li role="presentation"><a href="#contact" role="tab" id="contact-tab" data-toggle="tab" aria-controls="profile">Contact</a></li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade active show"  role="tabpanel" id="home" aria-labelledby="home-tab">
      <p>TAB-HOME</p>
    </div>
    <div class="tab-pane fade" role="tabpanel" id="profile" aria-labelledby="profile-tab">
      TAB-PROFILE
    </div>
    <div class="tab-pane fade"  role="tabpanel" id="about" aria-labelledby="about-tab">
      <p>TAB-ABOUT</p>
    </div>
    <div class="tab-pane fade" role="tabpanel" id="contact" aria-labelledby="contact-tab">
      TAB-CONTACT
    </div>
  </div>
</div>

<div>
 Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.
</div>
<div class="bottom-links">
<ul class="nav nav-tabs" id="myTabs1" role="tablist">
    <li role="presentation" class=""><a href="#home" role="tab" data-toggle="tab" aria-controls="home" class="active" aria-expanded="false">Home</a></li>
    <li role="presentation"><a href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a></li>
    <li role="presentation" class=""><a href="#about" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="false">About</a></li>
    <li role="presentation"><a href="#contact" role="tab" data-toggle="tab" aria-controls="profile">Contact</a></li>
  </ul>
</div>

提前致谢。

Answer 1

你可以这样做：

$('.nav.nav-tabs a').click(function() {
  var $selector = $('.nav.nav-tabs a[href="' + $(this).attr("href") + '"]').not(this);
  var nav = $selector.closest('.nav.nav-tabs');
  nav.find('a').removeClass("active");
  $selector.addClass("active");
})

演示

$('.nav.nav-tabs a').click(function() {
  var $selector = $('.nav.nav-tabs a[href="' + $(this).attr("href") + '"]').not(this);
  var nav = $selector.closest('.nav.nav-tabs');
  nav.find('a').removeClass("active");
  $selector.addClass("active");
})

.bs-example-tabs .nav-tabs li {
  padding: 15px;
  border: 1px solid lightgrey;
}

.bs-example-tabs .nav-tabs li>a.active {
  background: yellow;
}

.bs-example-tabs .tab-content {
  height: 120px;
  border: 1px solid grey;
}

.bottom-links {
  margin: 50px 0 0;
  height: 100px;
}

.bottom-links .nav-tabs li {
  padding: 15px;
  border: 1px solid lightgrey;
}

.bottom-links .nav-tabs li a.active {
  background: yellow;
}

<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="bs-example bs-example-tabs" data-example-id="togglable-tabs">
  <ul class="nav nav-tabs" id="myTabs" role="tablist">
    <li role="presentation" class=""><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" class="active" aria-expanded="false">Home</a></li>
    <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a></li>
    <li role="presentation" class=""><a href="#about" id="about-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="false">About</a></li>
    <li role="presentation"><a href="#contact" role="tab" id="contact-tab" data-toggle="tab" aria-controls="profile">Contact</a></li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade active show" role="tabpanel" id="home" aria-labelledby="home-tab">
      <p>TAB-HOME</p>
    </div>
    <div class="tab-pane fade" role="tabpanel" id="profile" aria-labelledby="profile-tab">
      TAB-PROFILE
    </div>
    <div class="tab-pane fade" role="tabpanel" id="about" aria-labelledby="about-tab">
      <p>TAB-ABOUT</p>
    </div>
    <div class="tab-pane fade" role="tabpanel" id="contact" aria-labelledby="contact-tab">
      TAB-CONTACT
    </div>
  </div>
</div>

<div>
  Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater
  eu banh mi, qui irure terry richardson ex squid.
</div>
<div class="bottom-links">
  <ul class="nav nav-tabs" id="myTabs1" role="tablist">
    <li role="presentation" class=""><a href="#home" role="tab" data-toggle="tab" aria-controls="home" class="active" aria-expanded="false">Home</a></li>
    <li role="presentation"><a href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a></li>
    <li role="presentation" class=""><a href="#about" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="false">About</a></li>
    <li role="presentation"><a href="#contact" role="tab" data-toggle="tab" aria-controls="profile">Contact</a></li>
  </ul>
</div>