纯CSS实现JS效果研究

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

利用CSS3:checked选择器和~配合实现tab切换

效果：

代码：

<style>
body,div,input,label{
margin:0;
padding:0;
}
#tab>input{
opacity:0;
position:absolute;
left:0;
top:0;
}
#tab .label{
overflow:hidden;
}
#tab .label>label{
float:left;
width:100px;
height:30px;
line-height:30px;
border:1px solid #dedede;
text-align:center;
margin-left:-1px;
}
.content li{
display:none;
}input:nth-of-type(1):checked~.label>label:nth-of-type(1){
background-color:red;
color:#fff;
}
input:nth-of-type(2):checked~.label>label:nth-of-type(2){
background-color:red;
color:#fff;
}
input:nth-of-type(3):checked~.label>label:nth-of-type(3){
background-color:red;
color:#fff;
}
input:nth-of-type(1):checked~.content li:nth-of-type(1){
display:block;
}
input:nth-of-type(2):checked~.content li:nth-of-type(2){
display:block;
}
input:nth-of-type(3):checked~.content li:nth-of-type(3){
display:block;
}
</style>
<div id="tab">
<input checked type="radio" name="name" id="name1">
<input type="radio" name="name" id="name2">
<input type="radio" name="name" id="name3">
<div class="label">
<label for="name1">选择1</label>
<label for="name2">选择2</label>
<label for="name3">选择3</label>
</div>
<div class="content">
<ul>
<li>内容1内容内容1内容1</li>
<li>内容2内容内容2内容2</li>
<li>内容3内容内容3内容3</li>
</ul>
</div>
</div>


原理就是点击label的时候就会选中input标签，然后通过CSS让当前选中的那个元素的对应内容显示就好了。

利用:target实现遮罩层效果

单击按钮的时候会弹出遮罩层，如果再点遮罩层的话就会把遮罩层给隐藏。

代码：

<style>
#show{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
display:none;
}
a[href="#hide"]{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
#hide:target{
display:none;
}
#show:target{
display:block;
}
</style><a href="#show">显示</a>
<div id="hide">
<div id="show">
<a href="#hide"></a>
</div>
</div>


长期更新...