在按鈕上單擊顯示圖像

想知道如何通過單擊按鈕來設置圖片的可見性。在按鈕上單擊顯示圖像

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

來源

2015-11-01 armi

首先包括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/

來源

2015-11-01 23:25:49

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

來源

2015-11-01 23:29:09 TheCarver

在按鈕上單擊顯示圖像

回答

相關問題