我想在li
元素没有类active
时重新加载iframe。
HTML:
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active">
<h3>Informazioni su come utilizzare il Totem</h3>
<p>Per utilizzare il Totem...</p>
</div>
<div id="sectionB" class="tab-pane fade">
<h3>Informazioni turistiche</h3>
</div>
<div id="dropdown1" class="tab-pane fade">
<h3>Orari STPS Bus da Chiavenna</h3>
<iframe id="myIframe" src="www.something.blabla"></iframe>
</div>
<div id="dropdown2" class="tab-pane fade">
<h3>Orari STPS da Chiavenna a Sondrio</h3>
<iframe id="CTOS" src="www.something.boh"></iframe>
</div>
<div id="dropdown3" class="tab-pane fade">
<h3>Chiavenna-St.Moritz</h3>
<iframe id="StMoriz" src="www.something.net"></iframe>
</div>
<div id="dropdown4" class="tab-pane fade">
<h3>Chiavenna-Lugano</h3>
<iframe id="Lugano" src="www.something.com"></iframe>
</div>
<div id="dropdown5" class="tab-pane fade">
<h3>Chiavenna - Colico - Milano</h3>
<iframe id="orariMilano" src="www.something.it"></iframe>
</div>
</div>
注意上面<a data-toggle="tab" href="#dropdown5">
和<div id="dropdown5" class="tab-pane fade">
之间的关系
<div class="my-tabs">
<ul class="nav nav-tabs" id="myTab">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Orari Bus Italia <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#dropdown1">Orari Bus Italia - STPS da Chiavenna</a></li>
<li><a data-toggle="tab" href="#dropdown2">Orari Bus Italia - STPS da Chiavenna a Sondrio</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Orari Bus St. Moriz <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#dropdown3">Orari Autopostale Svizzero da Chiavenna a St.Moritz</a></li>
<li><a data-toggle="tab" href="#dropdown4">Orari Autopostale Svizzero da Chiavenna a Lugano</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Orari Treni <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#dropdown5">Orari Treni - Chiavenna - Milano</a></li></ul>
</li>
<li><a data-toggle="tab" href="#sectionB">Informazioni Turistiche</a></li>
</ul>
使用Javascript:
console.log("NEED TO RELOAD");
if (!$('li').hasClass("active")) {
console.log("RELOADING");
window.setInterval("reloadIFrame();", 3000);}
function reloadIFrame() {
document.getElementById('myIframe').src += '';
}
console.log("RELOADED");
最后,我想知道如何在一段时间后在我的标签之间切换。
PS:我是StackOverflow的新手
提前谢谢!
答案 0 :(得分:3)
所以你需要一种旋转标签....试试这个:
$(function(){
var current = 0;
var tabs = $('.tab-content div').map(function(){
return $(this).attr("id");
});
setInterval(function(){
current = ++current!=tabs.length ? current : 0;
var iframe = $('#'+tabs[current]).find("iframe").attr("id")
/*if(iframe!=null)
document.getElementById(iframe).contentDocument.location.reload(true);*/
//reload here when iframes ve the correct address
$('.nav.nav-tabs > li').removeClass("active");
$('li a[href="#'+tabs[current]+'"]').parents('li').last().addClass("active");
$('.tab-content div').removeClass("in active");
console.log(current);
$('#'+tabs[current]).addClass("in active");
},4000);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="my-tabs">
<ul class="nav nav-tabs" id="myTab">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Orari Bus Italia <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#dropdown1">Orari Bus Italia - STPS da Chiavenna</a></li>
<li><a data-toggle="tab" href="#dropdown2">Orari Bus Italia - STPS da Chiavenna a Sondrio</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Orari Bus St. Moriz <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#dropdown3">Orari Autopostale Svizzero da Chiavenna a St.Moritz</a></li>
<li><a data-toggle="tab" href="#dropdown4">Orari Autopostale Svizzero da Chiavenna a Lugano</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Orari Treni <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#dropdown5">Orari Treni - Chiavenna - Milano</a></li></ul>
</li>
<li><a data-toggle="tab" href="#sectionB">Informazioni Turistiche</a></li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active">
<h3>Informazioni su come utilizzare il Totem</h3>
<p>Per utilizzare il Totem...</p>
</div>
<div id="sectionB" class="tab-pane fade">
<h3>Informazioni turistiche</h3>
</div>
<div id="dropdown1" class="tab-pane fade">
<h3>Orari STPS Bus da Chiavenna</h3>
<iframe id="myIframe" src=""></iframe>
</div>
<div id="dropdown2" class="tab-pane fade">
<h3>Orari STPS da Chiavenna a Sondrio</h3>
<iframe id="CTOS" src=""></iframe>
</div>
<div id="dropdown3" class="tab-pane fade">
<h3>Chiavenna-St.Moritz</h3>
<iframe id="StMoriz" src=""></iframe>
</div>
<div id="dropdown4" class="tab-pane fade">
<h3>Chiavenna-Lugano</h3>
<iframe id="Lugano" src=""></iframe>
</div>
<div id="dropdown5" class="tab-pane fade">
<h3>Chiavenna - Colico - Milano</h3>
<iframe id="orariMilano" src=""></iframe>
</div>
</div>
</div>