按下按鈕時如何顯示圖像？

Question

如何在按下按鈕後進行按鈕顯示和/或隱藏圖片？

body { 
 
    background-color: #000; 
 
    background-image: url(http://www.carolyndecristofano.com/wp/wp-content/uploads/2012/03/iStock_000017124788Large.jpg); 
 
    background-repeat: no-repeat; 
 
} 
 
header { 
 
    width: 1906px; 
 
    height: 980px; 
 
    background-image: url(https://stormideaswus.blob.core.windows.net/headerjunction/2014/91/6d2380c6-00e3-4f58-a911-c8aa98afa460.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: bottom; 
 
    position: relative; 
 
    bottom: 78px; 
 
    right: 10px; 
 
} 
 
.button { 
 
    display: block; 
 
    height: 100px; 
 
    width: 940px; 
 
    background: #34696f; 
 
    border: 2px solid rgba(33, 68, 72, 0.59); 
 
    color: rgba(0, 0, 0, 0.55); 
 
    text-align: center; 
 
    font: bold 3.2em/100px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
 
    background: linear-gradient(top, #34696f, #2f5f63); 
 
    border-radius: 50px; 
 
    box-shadow: 0 8px 0 #1b383b; 
 
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2); 
 
} 
 
a.button { 
 
    position: relative; 
 
    bottom: 78px; 
 
    text-decoration: none; 
 
} 
 
.button2 { 
 
    display: block; 
 
    height: 100px; 
 
    width: 940px; 
 
    background: #34696f; 
 
    border: 2px solid rgba(33, 68, 72, 0.59); 
 
    color: rgba(0, 0, 0, 0.55); 
 
    text-align: center; 
 
    font: bold 3.2em/100px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
 
    background: linear-gradient(top, #34696f, #2f5f63); 
 
    border-radius: 50px; 
 
    box-shadow: 0 8px 0 #1b383b; 
 
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2); 
 
} 
 
a.button2 { 
 
    position: relative; 
 
    bottom: 182px; 
 
    left: 945px; 
 
    text-decoration: none; 
 
} 
 
#show { 
 
    background-image: url(http://i.imgur.com/iEMr3n4.png) position: relative; 
 
    left: px; 
 
    bottom: 300px; 
 
}

<header></header> 
 

 
<a href="" class="button">Manipulation</a> 
 
<a href="" class="button2">Orgininal</a>

View on CodePen

Answer 1

您可以用一些JavaScript這樣做：https://jsfiddle.net/eye4ytq2/2/

<a href="#" onclick="button()" class="button">show</a> 
<a href="#" onclick="button2()" class="button2">hide</a> 
<div id="show"> 

</div> 
<script> 
function button(){ 
document.getElementById('show').style.visibility='visible'; 
} 
function button2(){ 
document.getElementById('show').style.visibility='hidden'; 
} 
</script> 

Answer 2

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.button').click(function(){ 
    $('#show').css('display','block'); 
}); 
$('.button2').click(function(){ 
    $('#show').css('display','none'); 
}); 

});