純CSS的頁籤(tab)

純CSS的頁籤(tab )

可用在blogger側邊欄的小工具

HTML & CSS

參考自國外網站 : http://css-tricks.com/functional-css-tabs-revisited/
並稍微修改得簡單些

隨著HTML5的時代來臨
CSS的能做到的功能也越來越多

以往要依靠JavaScript才能做出的特效
大大簡化網頁開發的複雜度

支援程度 :

• Internet Explorer 9+ (IE又是你)
• Firefox 3.6+
• Google Chrome 13+
• Safari 5.1+
• Opera 10+

HTML :

<div class="tabs">        <div class="tab">          <input type="radio" id="tab1" name="tabs" checked="checked">          <label for="tab1">頁籤1</label>          <div class="content">頁籤1內容</div>      </div>            <div class="tab">          <input type="radio" id="tab2" name="tabs">          <label for="tab2">頁籤2</label>          <div class="content">頁籤2內容</div>      </div>            <div class="tab">          <input type="radio" id="tab3" name="tabs">          <label for="tab3">頁籤3</label>          <div class="content">頁籤3內容</div>      </div>    </div>    

Style :

.tabs{      position:relative;      width:400px;      height:200px;  }    .tab{      float:left;  }    .tab > input[type=radio]{      display:none;  }    .tab > label{      display:block;      position:relative;      min-width:40px;      height:20px;      margin-right:-1px;      padding:5px 15px;      background:#DDD;      border:1px solid #AAA;  }    .tab > .content{      display:none;      position:absolute;      top:30px;      right:0;      bottom:0;      left:0;      z-index:1;      padding:10px;      background:#FFF;      border:1px solid #AAA;  }    .tab > input[type=radio]:checked + label{      background:#FFF;      border-bottom:1px solid transparent;      z-index:2;  }    .tab > input[type=radio]:checked ~ .content{      display:block;      }

Show :

在Chorme中瀏覽結果

IE9以下不支援主要是因為CSS3所新增的:checked
因此需對老舊版本的IE另寫JavaScript

Categories: blogger, html