當li元素確實具有某個類時，重新加載某些iframe

Question

當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的

預先感謝您！

Answer 1

所以你需要一種旋轉標籤....試試這個：

$(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>