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>
作用：通过laber的for属性进行关联，通过相同name的hidden隐藏式input中radio类型使用checked选中模式更改其之后兄弟的显示，这样不会出现a标签锚点的重定位问题
pre显示：将pre内容直接输出显示
<nav> 标签:
<nav> 标签定义导航链接的部分。
并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。
网友评论