Использование iframe внутри вкладки

Question

У меня есть элемент html вкладки, каждая вкладка содержит элемент 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%" /> 
    </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> 

Здесь работает jsfiddle.

Но проблема в том, что элемент табуляции не работает должным образом при изменении между вкладками. Любая идея, почему она не работает, когда я пытаюсь изменить вкладки?

Answer 1

Поскольку элемент 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>