IT工程師數位筆記本

利用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>

長期更新...