当li元素的类未处于活动状态时,我想重新加载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的新手
先感谢您!
解决方法:
因此,您需要一种旋转式制表符….尝试以下操作:
$(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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。