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标签锚点的重定位问题。
同类文章
pre显示：将pre内容直接输出显示
