视频灯箱无法正常工作

Question

我正在尝试将视频灯箱添加到网站，但它不起作用。这是我写的代码，

<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/vid.png"  alt="" /><br /> Watch Video</a>

Answer 1

我很确定你的onclick处理程序无效。

看看这个JSFiddle，看看是否有帮助。

其中的代码是，

<强> HTML ：

<div id="light" hidden>stuff</div>
<div id="fade" hidden>stuff</div>

<a id="watchVideo" href="javascript:void(0)">
    <img src="/images/vid.png"/>
    <br/> 
    Watch Video
</a>

<强>的JavaScript ：

document.getElementById("watchVideo").addEventListener("click", function displayVideo() {
    document.getElementById('light').hidden = false;
    document.getElementById('fade').hidden = false;
});