純CSS的頁籤(tab)

Published by knick,

純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 :


    

        
        
        
頁籤1內容

    

    
    

        
        
        
頁籤2內容

    

    
    

        
        
        
頁籤3內容

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

http://gnbox.net/node/559