CSS만 사용하여 버튼을 클릭하여 사진을 전환하는 방법

CSS에서는 ":target" 선택기와 표시 속성을 사용하여 버튼을 클릭하여 이미지를 전환할 수 있습니다. 요소에 대해 "Element:target{display:block;}" 문만 설정하면 됩니다. ":target" 선택기를 사용하면 현재 활성화된 대상 요소를 선택할 수 있습니다.

이 튜토리얼의 운영 환경: windows7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터.

오늘은 CSS의 :target 선택기를 사용하여 버튼을 클릭하여 해당 이미지를 전환하는 데모를 구현합니다. 이 데모는 JS를 사용하여 구현할 수도 있습니다.

데모 구조:

        <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>
	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 튜토리얼

위 내용은 CSS만 사용하여 버튼을 클릭하여 사진을 전환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!