[英]How can I load Bootstrap tabs content?
I want to add a loading spinner in bootstrap tabs while clicking on tab pane link it display a loading spinner few seconds after that the tab content will displayed.我想在引导选项卡中添加一个加载微调器,同时单击选项卡窗格链接它会在显示选项卡内容几秒钟后显示一个加载微调器。
HTML: 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: 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');
})
});
You can use setTimeout
method to show your spinner for some seconds and then show actual content.您可以使用setTimeout
方法显示您的微调器几秒钟,然后显示实际内容。
Demo Code :演示代码:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.