前言

在我的日常浏览中经常会看到，有些东西是需要点击后出现，点击后隐藏的，这里我们就用css来实现一下这个功能

其实原理很简单，就是利用css 将点击后才能出现的内容现隐藏，然后再点击后出现，原来的内容隐藏

			input{
				display: none;
			}
			label{
				width: 100px;
				height: 50px;
				line-height: 50px;
				/* background-color: aquamarine; */
				float: left;
				text-align: center;
				/* display: inline-block; */
				/* border-bottom: 1px solid #999; */
				
			}
			input[type="radio"]:checked+label{
				background-color: indianred;
			}
			.content{
				display: none;
			}
			input[type="radio"]:checked+label+.content{
				display: block;
			}
			.wrapper{
				position: relative;
				width: 300px;
				height: 250px;
				background-color: lightgray;
				margin: 0% auto;
			}
			.content{
				text-indent: 2em;
				position: absolute;
				top: 50px;
				left: 0%;
				margin-top: 20px;
			}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input{
				display: none;
			}
			label{
				width: 100px;
				height: 50px;
				line-height: 50px;
				/* background-color: aquamarine; */
				float: left;
				text-align: center;
				/* display: inline-block; */
				/* border-bottom: 1px solid #999; */
				
			}
			input[type="radio"]:checked+label{
				background-color: indianred;
			}
			.content{
				display: none;
			}
			input[type="radio"]:checked+label+.content{
				display: block;
			}
			.wrapper{
				position: relative;
				width: 300px;
				height: 250px;
				background-color: lightgray;
				margin: 0% auto;
			}
			.content{
				text-indent: 2em;
				position: absolute;
				top: 50px;
				left: 0%;
				margin-top: 20px;
			}
		</style>
	</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的隐藏与显示，并且简单制作了一个选项卡，想要继续学习的小伙伴请关注博主，下一个文章将开始新的内容便是JavaScript，JavaScript是重中之重

原文链接：https://blog.csdn.net/logical_thinking/article/details/126592750