如何仅在启动选项卡处于活动状态时加载启动选项卡内容

How do I load Bootstrap tab content only when it is active?

本文关键字：选项 启动 加载 活动状态 何仅      更新时间：2023-09-26

我正在使用Bootstrap选项卡从服务器加载小部件。我需要的是在用户单击选项卡时立即加载选项卡内容，而不是初始加载页面。例如，下面是页面的HTML：-

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#tabs-first" role="tab" data-toggle="tab">FX</a></li>
    <li><a href="#tabs-second" role="tab" data-toggle="tab">US Bond Futures</a></li>
    <li><a href="#tabs-third" role="tab" data-toggle="tab">US Short Term IR futures</a></li>
    <li><a href="#tabs-fourth" role="tab" data-toggle="tab">Global Equity Indices</a></li>
    <li><a href="#tabs-fifth" role="tab" data-toggle="tab">Commodities</a></li>
    <li><a href="#tabs-sixth" role="tab" data-toggle="tab">Volatility</a></li>
</ul>
<!-- Tab Content -->
<div class="tab-content">
    <!-- FX TAB content -->
    <div class="active tab-pane fade in" id="tabs-first">
    </div>
</div>

第一个选项卡引用#tabs-first id，而第二个选项卡则引用#tabs-second。我只想在用户单击该选项卡时加载#tabs-second，而不是在页面的初始加载过程中。

您想要获取什么样的内容？使用.load()，因为您只想针对#tabs-second，请将点击处理程序注册到该元素中，如下所示：

$('[href="#tabs-second"]').click(function(){
  $('#tabs-second').load('remoteUrl');
  // or use callback/complete
  $('#tabs-second').load('remoteUrl', function () {
    // do something here
  });
});
相关文章：