在css中,可以使用「:target」選擇器,配合display屬性來實作點擊按鈕切換圖片,只需要給元素設定「元素:target{display:block;}」語句即可。 “:target”選擇器可用來選取目前活動的目標元素。
本教學操作環境:windows7系統、HTML5&&CSS3版,DELL G3電腦。
今天使用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> <p id="img1"><img src="img/p001.jpg"/></p> <p id="img2"><img src="img/p002.jpg"/></p> <p id="img3"><img src="img/p003.jpg"/></p> <p id="img4"><img src="img/p004.jpg"/></p>
demo的CSS樣式:
<style> a{ padding:5px 10px; border:1px solid #000; color:#fff; background-color:#888; text-decoration:none; } p{ width:400px; height:400px; border:2px solid #ccc; margin-top:20px; position:absolute; top:20px; left:10px; display:none; padding:20px; } p:target{ display:block; } </style>
運行的效果:
##相關學習推薦:以上是如何只用css實現點擊按鈕切換圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章!