纯css 实现tab页切换
通过单选按钮的状态属性checked 获取按钮被选中的状态,从而通过css 兄弟选择器 *+*修改对应元素的状态
html 部分
<template>
<div class="content">
<ul>
<li>
<input type="radio" value="1" checked name="radioSingle1" id="rdo1" aria-label="">
<label for="rdo1">tab1</label>
<div>标签一</div>
</li>
<li>
<input type="radio" value="2" name="radioSingle1" id="rdo2" aria-label="">
<label for="rdo2">tab2</label>
<div>标签二</div>
</li>
<li>
<input type="radio" value="3" name="radioSingle1" id="rdo3" aria-label="">
<label for="rdo3">tab3</label>
<div>标签三</div>
</li>
<li>
<input type="radio" value="4" name="radioSingle1" id="rdo4" aria-label="">
<label for="rdo4">tab4</label>
<div>标签四</div>
</li>
</ul>
</div>
</template>
css 部分
input[type="radio"]:checked + label + div
display: block
left: 0
opacity: 1
input[type="radio"]:checked + label
color: #2d8cf0
border-bottom-color: #2d8cf0 !important
.content
width: 300px
height: 300px
border: 1px solid #ccc
border-radius: 4px
margin: 100px auto
ul
display: flex
position: relative
border-bottom: 1px solid rgb(206 209 216)
>li
flex: 1
text-align: center
line-height: 40px
margin: 0 3px
&:hover
label
color: #2d8cf0
label
width: 100%
cursor: pointer
display: block
border-radius: 3px
transition: color .3s
border-bottom: 2px solid transparent
>input
display: none
>div
opacity: 0
position: absolute
width: 100%
left: 300px
transition: left .4s
