在 2 个部分中显示 Bootstrap 4 活动选项卡

Question

我正在使用 Bootstrap v4.5.3，我试图在 2 个部分中显示一个活动选项卡，我搜索了一个更好的方法来做到这一点，但我无法解决它，你能帮忙吗？

 <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 和 Bootstrap 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>