相信大家做选项卡切换的时候都是用js或者jq完成的,但是有没有想过,样式表也能直接做呢?
今天就教大家如何实现,
主要是用到一些css3的属性,
基础操作,先布局
<label>
<input type="radio" name="tab" checked="checked" />
<span>选项1</span>
<p>选项1的内容</p>
</label>
<label>
<input type="radio" name="tab"/>
<span>选项2</span>
<p>选项2的内容</p>
</label>
<label>
<input type="radio" name="tab"/>
<span>选项3</span>
<p>选项3的内容</p>
</label>
样式这样写
label{
float: left;
width: 50px;
position: relative;
margin-right: 5px;
}
label input{
position: absolute;
left: -500px;
top: -500px;
}
label span{
float: left;
width: 50px;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid #000000;
cursor: pointer;
/*background: red;*/
}
label p{
display: none;
position: absolute;
width: 120px;
border:1px solid #000000;
top: 43px;
word-break: break-all;
}
label input:checked~span{
background: red;
}
label input:checked~p{
display: block;
}
label:nth-child(2) p{
left: -55px;
}
label:nth-child(3) p{
left: -110px;
}
这里主要用到伪类checked显示和隐藏盒子
然后nth-child调整位置。