Question

我正在尝试在第一个标签中显示iframe以加载显示，尽管它确实在我之后点击它时显示。我已经尝试将选项卡2或3设置为活动选项卡，但似乎活动选项卡（始终标记它）从不在加载时显示其内容。谢谢。小提琴：http://jsfiddle.net/nmt2pmtx/

http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css


div class="container">
 <div class="row">
  <div class="span12">
   <ul class="nav nav-tabs" id="myTabs">
     <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
     <li><a href="#dpa" data-toggle="tab">DPA</a></li>
     <li><a href="#rn" data-toggle="tab">Antwon</a></li>
   </ul>

   <div class="tab-content">
     <div class="tab-pane active" id="home" data-src="http://bing.com">
       <iframe src="" width="300" height="203" frameborder="0"></iframe>
   </div>

   <div class="tab-pane" id="dpa" data-src="http://www.drugpolicy.org/">
     <iframe src=""></iframe>
   </div>

   <div class="tab-pane" id="rn" data-src="http://bing.com">
      <iframe src="" width="500" height="203" frameborder="0"></iframe>
   </div>
  </div>
</div>
</div>
</div>




$('#myTabs').bind('show', function(e) {
paneID = $(e.target).attr('href');
src = $(paneID).attr('data-src');

// if the iframe hasn't already been loaded once
if ($(paneID + " iframe").attr("src") == "") {
$(paneID + " iframe").attr("src", src);
}
});

Answer 1

从“主页”标签中删除活动课程。在加载时它不显示任何框架。点击它只显示。

http://jsfiddle.net/nmt2pmtx/2/ <li class=""><a href="#home" data-toggle="tab">Home</a></li>

带有iframe的Bootstrap选项卡容器中的空默认选项卡

1 个答案: