Label和input直接有一个关联，那就是聚焦选中的关系。
<label for="tab1">1</label>
<label for="tab2">2</label>
<label for="tab3">3</label>
<input type="text" id="tab1">
<input type="text" id="tab2">
<input type="text" id="tab3">
打开之后点击label，你会发现焦点会聚焦到for对应的id上面，正因为这个关系，我们可以纯CSS实现tab切换。
先说一下思路，因为点击label的时候会自动聚焦到for对应的id，那么我们把这个input定位到一个框里面，高百分百占满这个框，然后绝对定位设置z-index为负的。点击label的时候，相当于scroll到当前聚焦的input。
标签：
<div>
<div style="text-align: center">
<label for="tab1">tab1</label>
<label for="tab2">tab2</label>
<label for="tab3">tab3</label>
<label for="tab4">tab4</label>
</div>
<div>
<div style="background: red">
<input type="text" id="tab1">
<p>tab1</p>
</div>
<div style="background: blue">
<input type="text" id="tab2">
<p>tab2</p>
</div>
<div style="background: green">
<input type="text" id="tab3">
<p>tab3</p>
</div>
<div style="background: yellow">
<input type="text" id="tab4">
<p>tab4</p>
</div>
</div>
</div>
CSS：
.content{
width: 800px;
height: 500px;
margin: 30px auto;
border: solid 1px red;
}
label{
display: inline-block;
width: 80px;
border: solid red 1px;
ine-height: 40px;
text-align: center;
}
.tab-content{
width: 300px;
height: 300px;
overflow: hidden;
border: solid blue 1px;
margin: 20px auto;
scroll-behavior: smooth;
}
.tab-content .item{
position: relative;
width: 300px;
height: 300px;
}
.tab-content input{
position: absolute;
top: 0;
height: 100%;
z-index: -1;
}
这样就能实现CSS切换tab，不需要任何js。
有一点缺陷就是没有滑动的效果，我这边用了scroll-behavior: smooth;这个属性，能够使scroll平滑的滑动，不过这个属性暂时兼容性还不够好。
欢迎关注Coding个人笔记 公众号
网友评论