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

时间:2017-07-20 10:25:37

标签: twitter-bootstrap-3

我正在尝试在第一个标签中显示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);
}
});

1 个答案:

答案 0 :(得分:0)

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

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