Html 使用相同的div在单击时显示不同的视频

当用户单击某个链接时，我试图在同一个Div中显示不同的视频

我已经在JSFIDLE中使用了它，但是当我将它上传到我的站点时，它并没有像在小提琴上一样改变视频。此外，我用来保存视频的容器在单击链接之前不会显示。我需要容器一直在页面上

这是小提琴：

您可以在“我的网页”上看到功能的网站位于

视频

部分下

表~div[id]{
显示：无；
}
div[id]：目标{
显示：块；
}
#教育{
框大小：边框框；
背景：url(http://www.howlinwolfmedia.com/galleryphotography /计算机1.png）中心不重复；
背景尺寸：包含；
填充物：3%13.7%17.2%16.9%；
位置：绝对！重要；
顶部：0px；
左：0px；
宽度：80%；
身高：100%；
}

---

我不明白您在这里尝试使用的是什么逻辑方法，有很多重复的元素。但是重构您的原始代码，您可以通过使用一个始终可见的带iframe的div和javascript来更改其src属性（因此更改内部视频）来实现您想要的

剧本

function playVideo(id)
{
    document.getElementById('education').src = id;
}

html（只保留其中一个div）

---

这里有一个

您有多个重复的#id，这将始终强制在DOM中进行“惰性”查找。拥有多个具有

id='education'

和

id='computer'

的元素是无效的，对基本行为和性能有害。一旦找到一个#id，浏览器就不再寻找其他任何东西，因为浏览器总是假定一个#id是唯一的——因此继续尝试寻找具有相同#id的另一个元素是不合逻辑的。

您甚至不需要JavaScript，您可以使用非常古老的

”


下一步设置每个


演示

正文{
位置：相对位置；
}
没问题，编码愉快。
<div id="computer" style='position: relative; width: 100%; height: 0px; padding-bottom: 60%;'>
    <iframe id="education" style='position: absolute; left: 0px; top: 0px; width: 100%; height: 100%' src="" frameborder="0"></iframe>
  </div>

<a href="#" onclick='playVideo("https://www.youtube.com/embed/tbPKVMpEA6M?rel=0&amp;showinfo=0")'>
                electrical
              </a>

table ~div[id] {
  display: none;
}