javascript - 当 li 元素确实具有某个类时重新加载某些 iframe

Question

我想在 li 时重新加载 iframe元素没有类别 active .

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>