按下按钮时如何显示图像？

Question

如何在我按下按钮后显示和/或隐藏图片？

＆＃13;

＆＃13;

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;
}

＆＃13;

<header></header>

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

＆＃13;

＆＃13;

＆＃13;

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');
 });

});