纯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>

长期更新...