[英]Using iframe inside tab
I have tab html element each tab contains iframe element. 我有标签html元素,每个标签都包含iframe元素。
Here is code: 这是代码:
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-target="#home" data-toggle="tab">BBC</a></li>
<li><a data-target="#profile" data-toggle="tab">CNN</a></li>
<li><a data-target="#messages" data-toggle="tab">Sky news</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<iframe src="http://www.bbc.com/" height="500px" width="100%" />
</div>
<div class="tab-pane" id="profile">
<iframe src="http://edition.cnn.com/" height="500px" width="100%" />
</div>
<div class="tab-pane" id="messages">
<iframe src="http://news.sky.com/" height="500px" width="100%" />
</div>
</div>
Here is working jsfiddle . 这是工作jsfiddle 。
But the problem that tab element not works properly when I change between tabs. 但是当我在选项卡之间切换时,选项卡元素无法正常工作的问题。 Any idea why it's not working when I try to change between tabs?
知道为什么当我尝试在选项卡之间切换时为什么它不起作用吗?
Because the iframe element isn't a self-closing element. 因为iframe元素不是自动关闭元素。 The versions of Firefox and Safari you're using are treating the /> at the end as just > and assuming everything after it is contained within the iframe.
您正在使用的Firefox和Safari版本将/>最后的/>视为>,并假定其后的所有内容都包含在iframe中。
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-target="#home" data-toggle="tab">BBC</a></li>
<li><a data-target="#profile" data-toggle="tab">CNN</a></li>
<li><a data-target="#messages" data-toggle="tab">Sky news</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<iframe src="http://www.bbc.com/" height="500px" width="100%" ></iframe>
</div>
<div class="tab-pane" id="profile">
<iframe src="http://edition.cnn.com/" height="500px" width="100%"></iframe>
</div>
<div class="tab-pane" id="messages">
<iframe src="http://news.sky.com/" height="500px" width="100%" ></iframe>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.