纯CSS选项卡
HTML:
<div class="tpt-bar">
<input type="radio" name="bar" id="tab-1" checked="">
<label for="tab-1">网站设置</label>
<div class="tpt-bar-con">
网站设置
</div>
<input type="radio" name="bar" id="tab-2">
<label for="tab-2">用户管理</label>
<div class="tpt-bar-con">
用户管理
</div>
<input type="radio" name="bar" id="tab-3">
<label for="tab-3">订单管理</label>
<div class="tpt-bar-con">
订单管理
</div>
</div>
CSS:
.tpt-bar {
display:flex;
border:1px solid #e2e2e2;
border-radius:2px;
background:#f2f2f2;
box-shadow:0 2px 5px 0 rgba(0,0,0,.1);
flex-wrap:wrap;
}
.tpt-bar label {
display:block;
padding:0 20px;
height:38px;
line-height:38px;
cursor:pointer;
order:1;
}
.tpt-bar .tpt-bar-con {
z-index:0;
display:none;
margin-top:-1px;
padding:10px;
width:100%;
min-height:120px;
border-top:1px solid #e2e2e2;
background:#fff;
order:99;
}
.tpt-bar input {
position:absolute;
opacity:0;
}
.tpt-bar input:checked+label {
z-index:1;
margin-right:-1px;
margin-left:-1px;
border-right:1px solid #e2e2e2;
border-left:1px solid #e2e2e2;
background:#fff;
}
.tpt-bar input:checked+label+.tpt-bar-con {
display:block;
}
{:0010:}{:0010:}
页:
[1]