css实现点击内容切换

最新推荐文章于 2024-04-12 21:46:12 发布

spy过家家

最新推荐文章于 2024-04-12 21:46:12 发布

阅读量2.4k

点赞数 6

文章标签： css html 前端

本文链接：https://blog.csdn.net/zm8454/article/details/125171348

版权

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/内容切换.css">
	</head>
	<body>
		<div class="wrapper">
			<input type="radio" name="title" id="active1" value="" />
			<label for="active1">红楼梦</label>
			<div class="content">
				《红楼梦》,中国古代章回体长篇小说，又名《石头记》《金玉缘》，被列为中国古典四大名著之首，一般认为是清代作家曹雪芹（作者尚有争议）所著。
			</div>
			<input type="radio" name="title" id="active2" value="" checked />
			<label for="active2">水浒传</label>
			<div class="content">
				《水浒传》是由中央电视台与中国电视剧制作中心联合出品的43集电视连续剧，根据明代施耐庵的同名小说改编。
			</div>
			<input type="radio" name="title" id="active3" value="" />
			<label for="active3">三国演义</label>
			<div class="content">
				《三国演义》是中日两国合作制作的动画片，已于2009年在中国上映。
			</div>
		</div>
	</body>
</html>

css：

/* 内容隐藏 */
input[type="radio"],
.content {
	display: none;
}

.wrapper {
	width: 450px;
	height: 300px;
	background-color: #F2F4F7;
	border-radius: 10px;
	position: relative;
}

.wrapper .content {
	position: absolute;
	left: 0;
	top: 50px;
}

label {
	float: left;
	width: 150px;
	height: 50px;
	color: black;
	line-height: 50px;
	text-align: center;
}

/* 有点击属性的内容显现 */
input:checked+label+.content {
	display: block;
}

input:checked+label {
	background-color: #2AC2B8;
	border-radius: 10px;
}

页面效果：