Maison > Article > interface Web > Comment changer d'image en cliquant sur un bouton en utilisant uniquement CSS
En CSS, vous pouvez utiliser le sélecteur ":target" et l'attribut d'affichage pour changer d'image en cliquant sur le bouton. Il vous suffit de définir l'instruction "element:target{display:block;}" pour le. élément. Le sélecteur ":target" peut être utilisé pour sélectionner l'élément cible actuellement actif.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3.
Aujourd'hui, nous utilisons le sélecteur :target en CSS pour implémenter une démo consistant à cliquer sur un bouton pour changer l'image correspondante. Cette démo peut également être implémentée en utilisant JS.
Structure de la démo :
<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>
Style CSS de la démo :
<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>
Effet d'exécution :
Apprentissage associé Recommandé : Tutoriel CSS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!