css制作选项卡，实现点击换内容

logical_thinking

于 2022-08-29 21:14:21 发布

阅读量1.4k

点赞数 2

分类专栏： css基础盒知识文章标签： html5 前端 html css 青少年编程

本文链接：https://blog.youkuaiyun.com/logical_thinking/article/details/126592750

版权

这篇博客介绍了如何利用CSS实现点击选项卡切换显示内容的功能。通过隐藏和显示元素，作者简要概述了CSS在创建这种交互效果时的基本原理，并预告下一篇文章将探讨JavaScript的重要角色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在我的日常浏览中经常会看到，有些东西是需要点击后出现，点击后隐藏的，这里我们就用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

最低0.47元/天解锁文章