利用单选按钮的checked属性实现tab切换

最新推荐文章于 2022-05-16 20:56:03 发布

七里香777

最新推荐文章于 2022-05-16 20:56:03 发布

阅读量748

点赞数

分类专栏：笔记 # CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_44286392/article/details/106211637

版权

笔记同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

CSS

15 篇文章 0 订阅

订阅专栏

html第二篇。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>利用checked实现tab切换</title>
	<style>
		*{padding: 0;margin: 0;}
		#box{margin:30px 50px;}
		/*E > F 表示选择E元素的所有子F元素，与E F的区别在于，E F选择所有后代元素，>只选择一代。 没有<的用法*/
		#tab>input{
			opacity:0;
			position: absolute;
			left:0;
			top:0;
		}
		/*关于label标签;https://baijiahao.baidu.com/s?id=1631597601711268301&wfr=spider&for=pc*/
		#tab .label>label{
			float:left;
			width:100px;
			height: 30px;
			line-height: 30px;
			border:1px solid #dedede;
			text-align: center;
			margin-left:-1px;
		}
		.content{width:300px;}
		.content li{
			display:none;
			text-indent: 2em;/*首行文本缩进*/
			font-size: 20px;
		}
		/*:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.*/
		/*n 可以是数字、关键词或公式。*/
		input:nth-of-type(1):checked~.label>label:nth-of-type(1){
			background: red;
			color:#fff;
		}
		input:nth-of-type(2):checked~.label>label:nth-of-type(2){
			background: red;
			color:#fff;
		}
		input:nth-of-type(3):checked~.label>label:nth-of-type(3){
			background: red;
			color:#fff;
		}
		input:nth-of-type(1):checked~.content li:nth-of-type(1){
			display:block;
		}
		input:nth-of-type(2):checked~.content li:nth-of-type(2){
			display:block;
		}
		input:nth-of-type(3):checked~.content li:nth-of-type(3){
			display:block;
		}
	</style>
</head>
<body>
	<div id="box">
		<div id="tab">
			<input type="radio" name="name" id="name1">
			<input type="radio" name="name" id="name2">
			<input type="radio" name="name" id="name3">
			<div class="label">
				<!-- label标签的for属性：规定 label 与哪个表单元素绑定。隐式和显式 -->
				<label for="name1">spring框架</label>
				<label for="name2">springMVC</label>
				<label for="name3">Mybatis</label>
			</div>
			<div class="content">
				<ul>
					<li>Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架。</li>
					<li>SpringMVC是一种基于Java的实现MVC设计模式的请求驱动类型的轻量级Web框架，使用了MVC架构模式的思想，将web层进行职责解耦，基于请求驱动指的就是使用请求-响应模型，框架的目的就是帮助我们简化开发。</li>
					<li>MyBatis 是一款优秀的持久层框架，它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息，将接口和 Java 的 POJOs(Plain Ordinary Java Object,普通的 Java对象)映射成数据库中的记录。</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

关于label标签：https://baijiahao.baidu.com/s?id=1631597601711268301&wfr=spider&for=pc

用到的知识点：①a>b与a b的区别
②:nth-of-type(n)与:nth-child() 的区别
③label标签的for属性

七里香777

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用单选按钮的checked属性实现tab切换

html第二篇。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>利用checked实现tab切换</title> <style> *{padding: 0;margin: 0;} #box{margin:30px 50px;} /*E > F 表示选择E元素的所有子F元素，与E F的区别在于，E F选择所有后
复制链接

扫一扫