仅在切换选项卡后加载内容。 Javascript 引导程序

Question

How to load content only after switching a tab ?

Load only TAB1 at start, then only after clicking TAB2 or TAB3 then load their content, but do not load them at start

Example: 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>

Answer 1

You can wait for the show.bs.tab event to load the content.

 // 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>