在按钮上单击显示图像

问题描述：

想知道如何通过单击按钮来设置图片的可见性。在按钮上单击显示图像

<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库在你的脑袋标签：

<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/

答

使用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"; 
});

在按钮上单击显示图像

相关推荐