1

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

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

4

5 回答 5

3

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

实际上，@Dipesh Parmar 您可以在纯 css 中完成这项工作，但您需要一个解决方法：

给图像一个 id，然后让按钮转到那个 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 很棒。

于 2013-03-28T08:31:05.423 回答
3

您可以使用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;
}

JSF中。

于 2013-03-28T08:33:02.733 回答
0

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

于 2013-03-28T08:28:00.377 回答
0

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

有一些 CSS 事件，最常见的是 :hover，但在你的情况下 :active 是最接近的。然而。使用纯 CSS 没有好的方法可以做到这一点。这里也是一个链接，你只能用 CSS 做些什么：

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

于 2013-03-28T08:30:24.580 回答
0

您可以使用 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>
于 2013-03-28T08:36:28.933 回答