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!