タブ内のiframeの使用

Question

各タブにはiframe要素が含まれているタブhtml要素があります。ここで

はコードです：ここでは

<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を進めています。

しかし、タブ間で変更するとタブ要素が正しく機能しないという問題があります。 タブ間で変更しようとすると、なぜ機能しないのでしょうか？