使用:target實現點選按鈕切換圖片的功能(純CSS)
阿新 • • 發佈:2018-12-26
今天使用CSS中的:target選擇器來實現點選按鈕切換相對應的圖片的demo,此demo也可以使用JS來實現。
demo的結構:
<a href="#img1">img1</a> <a href="#img2">img2</a> <a href="#img3">img3</a> <a href="#img4">img4</a> <div id="img1"><img src="img/p001.jpg"/></div> <div id="img2"><img src="img/p002.jpg"/></div> <div id="img3"><img src="img/p003.jpg"/></div> <div id="img4"><img src="img/p004.jpg"/></div>
demo的CSS樣式:<style> a{ padding:5px 10px; border:1px solid #000; color:#fff; background-color:#888; text-decoration:none; } div{ width:400px; height:400px; border:2px solid #ccc; margin-top:20px; position:absolute; top:20px; left:10px; display:none; padding:20px; } div:target{ display:block; } </style>
執行的效果: