input和label联合

最新推荐文章于 2024-06-27 20:36:21 发布

令月十一

最新推荐文章于 2024-06-27 20:36:21 发布

阅读量429

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_44234050/article/details/104015478

版权

input和label关联性:

CSS的tab切换

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			label {
				background: #b3fff9;
			}
			.label{
				width: 200px;
				display: flex;
				justify-content: space-around;
			}
			.tab div {
				width: 200px;
				height: 200px;
				display: none;
			}
			#tab1:checked+.con1,
			#tab2:checked+.con2 {
				display: block;
			}
		</style>
	</head>
	<body>
		<p>点击其中一个label-tab标签选中选项：</p>
		<div class="label">
			<label for="tab1">tab1</label>
			<label for="tab2">tab2</label>
		</div>
		<div class="tab">
			<!-- tab1—-con -->
			<input type="radio" id="tab1" name="radio" hidden="hidden">
			<div class="con1" style="background: #c9deff;">
				内容1
			</div>
			<!-- tab2-con -->
			<input type="radio" id="tab2" name="radio" hidden="hidden">
			<div class="con2" style="background: #4fff87;">
				内容2
			</div>
		</div>
	</body>
</html>

input中hidden
input详解
作用：通过laber的for属性进行关联，通过相同name的hidden隐藏式input中radio类型使用checked选中模式更改其之后兄弟的显示，这样不会出现a标签锚点的重定位问题。
同类文章