Home > Article > Web Front-end > How to switch pictures by clicking a button using only css
In CSS, you can use the ":target" selector and the display attribute to switch images by clicking the button. You only need to set the "Element:target{display:block;}" statement for the element. The ":target" selector can be used to select the currently active target element.
The operating environment of this tutorial: windows7 system, HTML5&&CSS3 version, DELL G3 computer.
Today we use the :target selector in CSS to implement a demo of clicking a button to switch the corresponding image. This demo can also be implemented using JS.
Structure of 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>
CSS style of demo:
<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>
Effect of operation:
Related learning Recommended: css tutorial
The above is the detailed content of How to switch pictures by clicking a button using only css. For more information, please follow other related articles on the PHP Chinese website!