点击即可替换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会用该部分{{1 }}，然后在点击另一个data-video

时取消设置默认的活动状态

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>