Heim >Web-Frontend >CSS-Tutorial >So wechseln Sie Bilder durch Klicken auf eine Schaltfläche nur mit CSS

So wechseln Sie Bilder durch Klicken auf eine Schaltfläche nur mit CSS

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-05-06 17:36:3612355Durchsuche

在css中,可以使用“:target”选择器,配合display属性来实现点击按钮切换图片,只需要给元素设置“元素:target{display:block;}”语句即可。“:target”选择器可用于选取当前活动的目标元素。

So wechseln Sie Bilder durch Klicken auf eine Schaltfläche nur mit CSS

本教程操作环境: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教程

Das obige ist der detaillierte Inhalt vonSo wechseln Sie Bilder durch Klicken auf eine Schaltfläche nur mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn