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

Posted 2023-03-21

【中文标题】仅在切换选项卡后加载内容。 Javascript 引导程序

【英文标题】：Load the content only after switching tabs. Javascript Bootstrap

【发布时间】：2022-01-06 15:21:24

【问题描述】：

如何切换标签后才加载内容？

开始时只加载 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>

【参考方案1】：

您可以等待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>