纯HTML,CSS实现点击图片，显示内容

之前实现过用纯js实现轮播图切换，以及点击图片显示相关介绍信息，现在用纯HTML，CSS实现一个小功能，这个是跟一个美国朋友学到，非常厉害的一个前端发开程序员。也是他给的我这个思路。

1.功能

点击图片，显示相关信息介绍。

2.实现思路

这里用到了label标签的for属性。for 属性的使用是将页面中的元素进行绑定。

请参照中文官方文档，里面有更详细介绍。

3.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮番图</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			ul {
				list-style: none;
				margin: 50px auto;
				display: inline-block;
				margin-left: 35px;
			}
			
			ul li {
				display: inline-block;
				float: left;
			}
						
			.wrapper {
				width: 730px;
				height: 730px;
				margin: 50px auto;
				background-color: azure;
				border: 1px gainsboro dotted;
			}
			 
			.img {
				cursor: pointer;
			}
			
			input[type="radio"] {
 				display: none;
			}
			
			.cont {
				display: none;
			}
			
			input[type="radio"]:checked+.cont {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<ul>
				<li><label for="cont_01"><img src="img/photo1.jpg" class="img" id="img_01"/></label></li>
				<li><label for="cont_02"><img src="img/photo2.jpg" class="img" id="img_02"/></label></li>
				<li><label for="cont_03"><img src="img/photo3.jpg" class="img" id="img_03"/></label></li>
				<li><label for="cont_04"><img src="img/photo4.jpg" class="img" id="img_04"/></label></li>
				<li><label for="cont_05"><img src="img/photo5.jpg" class="img" id="img_05"/></label></li>
				<li><label for="cont_06"><img src="img/photo6.jpg" class="img" id="img_06"/></label></li>
				<li><label for="cont_07"><img src="img/photo7.jpg" class="img" id="img_07"/></label></li>
				<li><label for="cont_08"><img src="img/photo8.jpg" class="img" id="img_08"/></label></li>
			</ul>
			<input type="radio" name="cont" id="cont_01"/>
			<div class="cont">
				李敏镐（이민호、Lee MinHo），1987年6月22日出生于首尔，韩国男演员。
			</div>
			<input type="radio" name="cont" id="cont_02"/>
			<div class="cont">
				刘诗诗 ，原名刘诗施，1987年3月10日出生于北京市，中国内地影视女演员、影视出品人。2002年，考入北京舞蹈学院芭蕾舞专业本科班学习。
			</div>
			<input type="radio" name="cont" id="cont_03"/>
			<div class="cont">
				迪丽热巴（Dilraba），1992年6月3日出生于新疆乌鲁木齐市，中国内地影视女演员。2013年，迪丽热巴因主演个人首部电视剧《阿娜尔罕》而出道。
			</div>
			<input type="radio" name="cont" id="cont_04"/>
			<div class="cont">
				胡歌，1982年9月20日出生于上海市徐汇区，中国内地演员、歌手。1996年，14岁的胡歌便成为上海教育电视台的小主持人，2005年毕业于上海戏剧学院表演系，同年在仙侠剧《仙剑奇侠传》中塑造了“李逍遥”一角，并演唱该剧插曲《六月的雨》《逍遥叹》。
			</div>
			<input type="radio" name="cont" id="cont_05"/>
			<div class="cont">
				乔振宇，1978年11月1日出生于广西壮族自治区桂林市，中国内地影视男演员，毕业于北京舞蹈学院。
			</div>
			<input type="radio" name="cont" id="cont_06"/>
			<div class="cont">
				宋茜（Victoria），1987年2月2日出生于山东省青岛市，中国内地女演员、歌手，亚洲多栖发展女艺人。
			</div>
			<input type="radio" name="cont" id="cont_07"/>
			<div class="cont">
				老太太时一种对老年妇女的尊称。同时也是四代重孙，孙子对爷爷母亲的称呼，也指尊称别人的或自己的母亲。
			</div>
			<input type="radio" name="cont" id="cont_08"/>
			<div class="cont">
				萌是一种活力，是一种生机，激情熄灭岁月，魅力绽放光荣。终于轮到我们去炫出生机，炫出光荣了。
			</div>
		</div>
	</body>
</html>

4.执行效果

1）.初始化页面

2).点击刘诗诗的图片

3).点击萌豆的图片

图片资源可以到个人网盘下载：

khttps://pan.baidu.com/s/1GlVj1hsMsDUAFALqKNBCOQ 密码：lnhx

PS:图片来源是个人为了学习在网上抓取，显示内容也是自己随意搭配，并无恶意，纯属学习。希望对大家有帮助。

纯HTML,CSS实现点击图片，显示内容

猜你喜欢