可用在blogger側邊欄的小工具
參考自國外網站 : http://css-tricks.com/functional-css-tabs-revisited/
並稍微修改得簡單些
隨著HTML5的時代來臨
CSS的能做到的功能也越來越多
以往要依靠JavaScript才能做出的特效
大大簡化網頁開發的複雜度
支援程度 :
在Chorme中瀏覽結果
IE9以下不支援主要是因為CSS3所新增的:checked
因此需對老舊版本的IE另寫JavaScript
並稍微修改得簡單些
隨著HTML5的時代來臨
CSS的能做到的功能也越來越多
以往要依靠JavaScript才能做出的特效
大大簡化網頁開發的複雜度
支援程度 :
- Internet Explorer 9+ (IE又是你)
- Firefox 3.6+
- Google Chrome 13+
- Safari 5.1+
- Opera 10+
<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
0 意見:
張貼留言