僅在活動狀態下如何加載Bootstrap選項卡內容？

Question

我正在使用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 ，而不是在頁面的初始加載時加載。

Answer 1

您想獲取哪種內容？ 使用.load() ，因為您只想定位.load() #tabs-second ，將單擊處理程序注冊到該元素，如下所示：

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