显示引导带4活动选项卡在两个部分

Question

我正在使用Bootstrav4.5.3，我试图在两个部分中显示一个活动选项卡，我寻找了一个更好的方法来完成这个任务，但是我无法解决它，您能帮我解决这个问题吗？

​

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
 

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>

<div class="row nogutters tab-content">
<div class="col mr-2 bg-secondary text-white">
  <div class="col tab-pane fade show active" id="home"role="tabpanel" aria-labelledby="home-tab"> Home-1</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile-1</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact-1</div>
</div>
<div class="col mr-2 bg-secondary text-white">
  <div class="col tab-pane fade show active" id="home"role="tabpanel" aria-labelledby="home-tab"> Home-2</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile-2</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact-2</div>
</div>
</div>


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

​

Answer 1

它似乎必须手动使用jQuery和事件给出的引导4。

因此，我在这里主要做的是获取目标元素的数据和前面单击的选项卡元素，并执行多个条件来实现所需的行为。

您可以在此页的底部看到引导事件https://getbootstrap.com/docs/4.0/components/navs/。

​

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  
  let target = e.target // newly activated tab
  let previous = e.relatedTarget // previous active tab
    
  if(target.id === "profile-tab"){
  
    // Remove active class from previous elements
    if(previous.id === "home-tab"){  
      
      $('#home1').removeClass('show active')
      $('#home2').removeClass('show active') 
    }
    else{
      $('#contact1').removeClass('show active')
      $('#contact2').removeClass('show active')
    }
    
    // Add active class to target elements
    $('#profile1').addClass('show active')
    $('#profile2').addClass('show active')
  
  }  
    
  if(target.id === "contact-tab"){
  
    // Remove active class from previous elements
    if(previous.id === "home-tab"){  
      
      $('#home1').removeClass('show active')
      $('#home2').removeClass('show active')
    }
    else{
      $('#profile1').removeClass('show active')
      $('#profile2').removeClass('show active')
    }
    
    // Add active class to target elements
    $('#contact1').addClass('show active')
    $('#contact2').addClass('show active')
  
  }    
  
  if(target.id === "home-tab"){
  
    // Remove active class from previous elements
    if(previous.id === "home-tab"){  
      
      $('#contact1').removeClass('show active')
      $('#contact2').removeClass('show active')
    }
    else{
      $('#profile1').removeClass('show active')
      $('#profile2').removeClass('show active')
    }
    
    // Add active class to target elements
    $('#home1').addClass('show active')
    $('#home2').addClass('show active')
  
  }    
})

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
 
<ul class="nav nav-tabs" id="myTab" role="tablist">

  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
  
</ul>

<div class="row nogutters tab-content">

  <div class="col mr-2 bg-secondary text-white">
    <div class="col tab-pane fade show active" id="home1" role="tabpanel" aria-labelledby="home-tab"> Home-1</div>
      <div class="tab-pane fade" id="profile1" role="tabpanel" aria-labelledby="profile-tab">Profile-1</div>
      <div class="tab-pane fade" id="contact1" role="tabpanel" aria-labelledby="contact-tab">Contact-1</div>
  </div>
  
  <div class="col mr-2 bg-secondary text-white">
    <div class="col tab-pane fade show active" id="home2" role="tabpanel" aria-labelledby="home-tab"> Home-2</div>
      <div class="tab-pane fade" id="profile2" role="tabpanel" aria-labelledby="profile-tab">Profile-2</div>
      <div class="tab-pane fade" id="contact2" role="tabpanel" aria-labelledby="contact-tab">Contact-2</div>
  </div>
  
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>

​