如何仅在切换选项卡后加载内容?
在开始时仅加载 TAB1,然后仅在之后单击 TAB2 或 TAB3 然后加载其内容,但不在开始时加载它们
示例:https://jsfiddle.net/t52mwLoc/
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Default Tab</h4>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"> <a class="nav-link active show" data-toggle="tab" href="#tab1" role="tab" aria-selected="true">TAB1</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-selected="false"> TAB2</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab3" role="tab" aria-selected="false"><span class="hidden-sm-up"> TAB3</a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content tabcontent-border">
<div class="tab-pane active show" id="tab1" role="tabpanel">
<div class="p-20">
Load this content...
</div>
</div>
<div class="tab-pane p-20" id="tab2" role="tabpanel">Load this AFTER clicking [TAB2]</div>
<div class="tab-pane p-20" id="tab3" role="tabpanel">Load this AFTER clicking [TAB3]</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
show.bs.tab
事件来加载内容。
// Content to load stored in array just for demonstration purposes
const content = ["Load this content...", "Load this AFTER clicking [TAB2]", "Load this AFTER clicking [TAB3]"];
$('.nav-tabs > .nav-item').on('show.bs.tab', function(e) {
if (!$(this).data('loaded')) { // Don't load same content twice
$(this).data('loaded', true).closest('.nav-tabs')
.parent().find('.tab-pane').eq($(this).index())
.text(content[$(this).index()]); // Or load using AJAX
}
}).find('a.active').trigger('show.bs.tab');
// Trigger on initially active tab to load its content first
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Default Tab</h4>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"> <a class="nav-link active show" data-toggle="tab" href="#tab1" role="tab" aria-selected="true">TAB1</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-selected="false"> TAB2</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab3" role="tab" aria-selected="false"><span class="hidden-sm-up"></span> TAB3</a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content tabcontent-border">
<div class="tab-pane active show" id="tab1" role="tabpanel">
<div class="p-20"></div>
</div>
<div class="tab-pane p-20" id="tab2" role="tabpanel"></div>
<div class="tab-pane p-20" id="tab3" role="tabpanel"></div>
</div>
</div>
</div>
</div>
$('ul.nav-tabs').on('show.bs.tab', '.nav-item', function () {
let containerSelector = $(this).children('a.nav-link').attr('href');
let $container = $(containerSelector);
$container.html('test');
});
上面的示例还将事件委托给 ul 而不是导航项本身,以防选项卡需要动态更改。换句话说,该事件不需要添加到任何新的导航链接中。如果您仍想将导航链接的索引与数据相关联,您仍然可以使用导航链接的索引,但在这种情况下,我建议使用 ids 作为键将数据与对象相关联。