如何加载 Bootstrap 选项卡内容？答案

【问题标题】：How can I load Bootstrap tabs content?如何加载 Bootstrap 选项卡内容？
【发布时间】：2021-04-28 13:26:11
【问题描述】：

我想在引导标签中添加一个加载微调器，同时点击标签窗格链接它会显示一个加载微调器 几秒钟后，标签内容会显示出来。

HTML：

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-bs-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-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <div class="d-flex justify-content-center">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <div>Active Tab Pane</div>
  </div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <div class="d-flex justify-content-center">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <div>Tab Pane</div>
  </div>
</div>

JavaScript：

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
    var tabTrigger = new bootstrap.Tab(triggerEl)
    triggerEl.addEventListener('shown.bs.tab', function (event) {
        event.preventDefault();
        tabTrigger.show();
        // alert('Hello World');
    })
});

【问题讨论】：

标签： javascript html jquery css bootstrap-5

【解决方案1】：

您可以使用setTimeout 方法显示您的微调器几秒钟，然后显示实际内容。

演示代码：

call_to_show() //on load..call
var tabEl = document.querySelectorAll('a[data-bs-toggle="tab"]')
Array.from(tabEl).forEach(link => {
  link.addEventListener('shown.bs.tab', function(event) {
    call_to_show();
  })
})

function call_to_show() {
  //get spinner and actual content where class is active
  var spinner = document.querySelector('.tab-pane.active .spinner-border')
  var content = document.querySelector('.tab-pane.active .actual_content')
  //show sppinner
  spinner.style.display = "block";
  content.style.display = "none";
  setTimeout(function() {
    //hide spinner
    spinner.style.display = "none";
    content.style.display = "block";
  }, 1000); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-bs-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-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <div class="d-flex justify-content-center">
      <div class="spinner-border" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>
    <div class="actual_content">Active Tab Pane</div>
  </div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <div class="d-flex justify-content-center">
      <div class="spinner-border" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>
    <div class="actual_content">Tab Pane</div>
  </div>
</div>

【讨论】：