Как загрузить содержимое вкладки 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 идентификатор и второй вкладке в #tabs-second. Я хочу загрузить #tabs-second только тогда, когда пользователь нажимает эту вкладку не во время начальной загрузки страницы.

Answer 1

Какой контент вы хотите получить? Используйте .load(), так как вы хотите использовать таргетинг только для #tabs-second, зарегистрируйте обработчик щелчка по этому элементу следующим образом: