使用jQuery加载标签内容

Question

我的网页上有切换视图的标签。 Preview

问题是，当页面加载时，它会从所有选项卡加载所有信息。

我希望在用户切换标签时加载标签内容。

当前代码：

<div class="row-fluid"> 
    <div class="span12"> 
     <div class="tabbable"> 
      <ul class="nav nav-tabs" id="Tabs"> 
       <li class="active"> 
       <a href="#tab1-1" data-toggle="tab">TEXT1</a> 
       </li> 
       <li> 
       <a href="#tab2-1" data-toggle="tab">TEXT2</a> 
       </li> 
       <li> 
       <a href="#tab3-1" data-toggle="tab">TEXT3</a> 
       </li> 
      </ul> 
      <div class="tab-content"> 
       <div class="tab-pane active" id="tab1-1"> 
        <img src="http://colmenarviejo.info/IMG/BANNER_300X300.jpg" style="width: 300px; height: 300px;" data-src="holder.js/300x200" alt="300x200" class="img-polaroid"> 
       </div> 
       <div class="tab-pane" id="tab2-1"> 
        <iframe width="100%" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=40.614474,-111.926758&amp;num=1&amp;t=m&amp;ie=UTF8&amp;ll=40.609782,-111.936264&amp;spn=0.156382,0.205307&amp;z=11&amp;output=embed"> 
        </iframe> 
       </div> 
       <div class="tab-pane" id="tab3-1"> 
        <dl class="dl-horizontal"> 
         <dt>City</dt> 
         <dd>Av. 1</dd> 
         <dt>Tel</dt> 
         <dd>(000)123456789</dd> 
        </dl> 
       </div> 
      </div> 
     </div> 
    </div> 

使用Javascript（Plugin）：

$('a[data-toggle="tab"]').on('shown', function (e) { 
    e.target // activated tab 
    e.relatedTarget // previous tab 
}) 

我应该如何开始在选项卡上加载的内容，用户点击的时候？

Answer 1

您可以使用jQuery​​将内容加载到所选窗格中，然后在内容成功加载后显示窗格。

例子：http://www.bootply.com/63891