單擊替換iFrame src嗎？

Question

目前，我在下面的列表中需要更新現有div中的iFrame。

<div class="stream">
   <iframe src="" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>

上面的部分是我們需要更新的iFrame，下面的部分是我們必須在單擊時選擇的流的列表。

<ul>
    <li class="anime">
        <a class="active" data-video="https://someexamplewebsite.com" href="#" rel=
        "1">Vidstreaming<span>Choose this server</span></a>
    </li>
    <li class="vidcdn">
        <a class="" data-video="https://someexamplewebsite.com" href="#" rel="100">Vidcdn<span>Choose
        this server</span></a>
    </li>
    <li class="streamango">
        <a data-video="https://someexamplewebsite.com" href="#" rel="12">Streamango<span>Choose this server</span></a>
    </li>
    <li class="rapidvideo">
        <a data-video="https://someexamplewebsite.com" href="#" rel="21">Rapidvideo<span>Choose this server</span></a>
    </li>
    <li class="estram">
        <a data-video="https://someexamplewebsite.com" href="#" rel="7">Estream<span>Choose this server</span></a>
    </li>
    <li class="open">
        <a data-video="https://someexamplewebsite.com" href="#" rel="16">Oload<span>Choose this server</span></a>
    </li>
    <li class="open">
        <a data-video="https://someexamplewebsite.com" href="#" rel="5">OpenUpload<span>Choose this server</span></a>
    </li>
    <li class="mp4">
        <a data-video="https://someexamplewebsite.com" href="#" rel="3">Mp4Upload<span>Choose this server</span></a>
    </li>
</ul>

我想知道我們如何才能輕松實現這一目標，並且以某種方式，如果a具有active類別，則iframe會用該部分data-video進行更新，然后在點擊另一個a href取消設置默認活動類別

Answer 1

 <div class="stream"> <iframe src="" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" id='iFrameElement'></iframe> </div> <ul> <li class="anime"> <a class="active" data-video="https://someexamplewebsite.com" href="#" rel= "1" onclick="changeSource(this)">Vidstreaming<span>Choose this server</span></a> </li> <li class="vidcdn"> <a class="" data-video="https://someexamplewebsite.com" href="#" rel="100" onclick="changeSource(this)">Vidcdn<span>Choose this server</span></a> </li> <li class="streamango"> <a data-video="https://someexamplewebsite.com" href="#" rel="12" onclick="changeSource(this)">Streamango<span>Choose this server</span></a> </li> <li class="rapidvideo"> <a data-video="https://someexamplewebsite.com" href="#" rel="21" onclick="changeSource(this)">Rapidvideo<span>Choose this server</span></a> </li> <li class="estram"> <a data-video="https://someexamplewebsite.com" href="#" rel="7" onclick="changeSource(this)">Estream<span>Choose this server</span></a> </li> <li class="open"> <a data-video="https://someexamplewebsite.com" href="#" rel="16" onclick="changeSource(this)">Oload<span>Choose this server</span></a> </li> <li class="open"> <a data-video="https://someexamplewebsite.com" href="#" rel="5" onclick="changeSource(this)">OpenUpload<span>Choose this server</span></a> </li> <li class="mp4"> <a data-video="https://someexamplewebsite.com" href="#" rel="3" onclick="changeSource(this)">Mp4Upload<span>Choose this server</span></a> </li> </ul> <script> function changeSource(e){ var t = e.getAttribute("data-video"); document.getElementById("iFrameElement").src=t; } </script> 

 <div class="stream"> <iframe src="" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" id='iFrameElement'></iframe> </div> <ul> <li class="anime"> <a class="active" data-video="https://someexamplewebsite.com" href="#" rel= "1" onclick="changeSource(this)">Vidstreaming<span>Choose this server</span></a> </li> <li class="vidcdn"> <a class="" data-video="https://someexamplewebsite.com" href="#" rel="100" onclick="changeSource(this)">Vidcdn<span>Choose this server</span></a> </li> <li class="streamango"> <a data-video="https://someexamplewebsite.com" href="#" rel="12" onclick="changeSource(this)">Streamango<span>Choose this server</span></a> </li> <li class="rapidvideo"> <a data-video="https://someexamplewebsite.com" href="#" rel="21" onclick="changeSource(this)">Rapidvideo<span>Choose this server</span></a> </li> <li class="estram"> <a data-video="https://someexamplewebsite.com" href="#" rel="7" onclick="changeSource(this)">Estream<span>Choose this server</span></a> </li> <li class="open"> <a data-video="https://someexamplewebsite.com" href="#" rel="16" onclick="changeSource(this)">Oload<span>Choose this server</span></a> </li> <li class="open"> <a data-video="https://someexamplewebsite.com" href="#" rel="5" onclick="changeSource(this)">OpenUpload<span>Choose this server</span></a> </li> <li class="mp4"> <a data-video="https://someexamplewebsite.com" href="#" rel="3" onclick="changeSource(this)">Mp4Upload<span>Choose this server</span></a> </li> </ul> <script> function changeSource(e){ var t = e.getAttribute("data-video"); document.getElementById("iFrameElement").src=t; var eSet = document.getElementsByTagName("a"); var i = 0; while(i < eSet.length){ eSet[i].className = ""; i++; } e.className = "active"; } </script>