Question

我看到许多问题，人们使用jQuery隐藏/显示图像，但我没有安装jQuery，我更喜欢使用Html / css？

有没有办法在不使用任何javascript的情况下点击按钮时显示图像？

Answer 1

正如@Gnuey所说，只需从主机引用它就可以轻松安装jQuery。谷歌和微软都主持jQuery，但大多数人都使用谷歌。我建议你查看他的评论以获取更多信息。

实际上，@ Dipesh Parmar你可以用纯CSS进行这项工作，但是你需要一个解决方法：

为图片指定一个id，然后按下该按钮：

<a href="/#revealonclick"><button>Click to reveal image</button></a>
<img alt="" id="revealonclick" src="/image/pic.png">

然后在图像的CSS中：

#revealonclick{
    display: none;
}

#revealonclick:target{
    display: inline;
}

是的。这是可能的。 CSS3太棒了。

Answer 2

您可以使用checkboxes切换点击。

<强> HTML

<input type="checkbox" id="toggle">
<label for="toggle">Click me!</label>
<img src="http://image.shutterstock.com/display_pic_with_logo/232318/232318,1264892711,1/stock-photo-sleeping-pug-puppy-45602341.jpg" alt="" />

<强> CSS

img{display:none;}
input[type=checkbox]:checked ~ img {
    display:block;
}

JSFiddle

Answer 3

点击DOM是浏览器event而css无法处理此类events，因此您需要使用client-side脚本，例如 javascript ， jQuery 或 mootools 等。

Answer 4

你不需要jQuery来做到这一点。只需使用没有任何库的纯Javascript。

有一些CSS事件，最常见的是：悬停，但在你的情况下：active是最接近的事件。然而。用纯CSS做这个没有好办法。这里有一个链接，你只能用CSS做什么：

http://www.ryancollins.me/?p=1041

Answer 5

您可以使用JavaScript的基本形式，如下所示:(如果您认真反对安装 jQuery）

function toggleImage() {
    var imgId = document.getElementById('image');
    imgId.style.visibility = (imgId.style.visibility === "hidden" || imgId.style.visibility === "") ? "visible" : "hidden";
}

HTML

的位置

<img id="image" src="http://i458.photobucket.com/albums/qq305/Ellerwind1982/souleater5.jpg" />
<button id="sth" onclick="javascript: toggleImage();">Hi</button>

无需javascript即可显示隐藏的图像

5 个答案: