文章/答案/技术大牛

发布

问按一下按钮显示图像
EN

Stack Overflow用户

提问于 2015-11-01 23:19:00

回答 2查看 57关注 0票数 1

不知道如何通过点击按钮设置图片的可见性。

<body class="body page-index clearfix">
<img class="image image-1" src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png">
<img class="image image-2" src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png">
<button class="_button" >Test</button>
<img class="image image-3" src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png">

.image {
    display: block;
    visibility: hidden;
    height: auto;
    overflow: hidden;
}

小提琴：https://jsfiddle.net/cz5yyu83/

jquery

html

css

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-11-01 23:25:49

首先，在头标签中包含jQuery库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

在此之后，使用以下脚本：

$(document).ready(function() {
    $('._button').click(function(){
        $('.image').css('visibility', 'visible');
    });
});

下面是jsfiddle：https://jsfiddle.net/cz5yyu83/1/

票数 2

Stack Overflow用户

发布于 2015-11-01 23:29:09

使用jQuery：

$(document).ready(function() {
    $('._button').click(function() {
       $('.image').css('visibility','visible'); 
    });
});

https://jsfiddle.net/hyh9zajp/

对于纯Javascript，它也非常简单：

var button = document.getElementsByClassName('_button');
var images = document.getElementsByClassName('image');

button.addEventListener('click', function() {
    images.style.visibility = "visible";
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33468375

复制

相似问题

问按一下按钮显示图像
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问按一下按钮显示图像EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问按一下按钮显示图像
EN