css - 如何在切换IMg2 img3 img4的时候第一张图片消失
<!DOCTYPE html>
<html >
<head>
<title> new document </title>
<meta charset="utf-8" />
<style>
#pic{
width:350px;
height:350px;
border:1px solid #ddd;
margin-top:20px;
}
#link a{
diaplay:inline-block;
border:1px solid #ddd;
background-color:gray;
padding:5px 10px;
}
#pic a img:not([class='pic1']){
display:none;
}
#pic a:target img{
display:block;
}
</style>
</head>
<body>
<p id='link'>
<a href='#img1'>img1</a>
<a href='#img2'>img2</a>
<a href='#img3'>img3</a>
<a href='#img4'>img4</a>
</p>
<p id='pic'>
<a name='img1'><img src='images/p001.jpg' class='pic1' /></a>
<a name='img2'><img src='images/p002.jpg' class='pic2' /></a>
<a name='img3'><img src='images/p003.jpg' class='pic3' /></a>
<a name='img4'><img src='images/p004.jpg' class='pic3' /></a>
</p>
</body>
</html>
