Javascript 在单击时替换iFrame src？

目前，我有下面的列表，需要更新现有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

函数变更源（e）{
var t=e.getAttribute（“数据视频”）；
document.getElementById（“iFrameElement”）.src=t；
}