点击按钮出现各图片:
<!doctype html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<style>
.clear:after{
content:"";
display:block;
clear:both;
}
#dl a{
width:100px;
height:20px;
border:1px solid #000;
background-color:#CACAC9;
float:left;
margin:10px;
}
#d2{
width:600px;
height:600px;
border:1px solid #ddd;
margin-left:10px;
}
#d2 img{
display:none;
}
#d2 #img01:target,#d2 #img02:target,#d2 #img03:target,#d2 #img04:target{
display:block;
margin:125px auto;
}
</style>
</head>
<body>
<div id="dl" class="clear">
<a href="#img01">img1</a>
<a href="#img02">img2</a>
<a href="#img03">img3</a>
<a href="#img04">img4</a>
</div>
<div id="d2">
<img src="images/p001.jpg" id="img01">
<img src="images/p002.jpg" id="img02">
<img src="images/p003.jpg" id="img03">
<img src="images/p004.jpg" id="img04">
</div>
</body>
</html>