显示没有JS的<div> </div>

时间:2011-05-06 16:52:44

标签: javascript html css

我有一个非常非常简单的网页,它包含一个大的背景图像和一个位于该图像中心的按钮(按钮放在div中以定位它),我希望这个按钮可以点击,并且点击时,替换为另一个将显示电影预告片的div。

我遇到的每个解决方案都实现了JS,它是显示/隐藏div而不是替换show / hide按钮。

我只是想显示div,之后不需要隐藏(因为按钮有望被替换)。

与Duke Nukem网站上的这个例子几乎相同:http://www.dukenukemforever.com/full/us/

单击播放预告片时,它显示为中央。这个和我想要做的唯一区别是我希望我的按钮也是中央的,并在按钮的顶部显示预告片(在它开始后无法隐藏预告片)

如果有人想知道为什么我不把这个预告片放在页面上而不打扰这就是让它“显示”而不是仅仅将视频嵌入到页面中心的div中的原因是该网页有一个大背景,我希望首先看到影响,然后显示预告片。

如果JS中有可能并且有人可以向我展示一个例子,我也会对此持开放态度!

4 个答案:

答案 0 :(得分:6)

您可以使用:target selector

Demo

答案 1 :(得分:0)

有一种方法可以使用:target选择器(仅在最新的浏览器上支持)从直接HTML和CSS3执行此操作。在下面的评论中,如果你按照jsfiddle链接,SLaks会给你一个例子。

互联网上有很多例子可以让你使用JavaScript来显示/隐藏div onclick。以下是一个示例:http://www.learningjquery.com/2006/09/slicker-show-and-hide

答案 2 :(得分:0)

你可以做的是使用css的绝对定位和z-index规则来显示在第一个div顶部显示预告片的div。这可以使用div元素的style属性在javascript中完成

答案 3 :(得分:0)

你能不能用CSS:

div.button:active {
   visibility:visible;
}

您也可以使用CSS表达式我确定,但表达式已被弃用且几乎不受支持。