首页 > 代码库 > 自创简易CSS Tab 选项卡
自创简易CSS Tab 选项卡
前段时间我注册了 w3c.run域名，打算做一个W3C相关技术在线试验工具。没错，就是在线编写html、css、js代码然后在线运行，查看效果。
在设计首页时，我打算首页提供三个代码编辑器，介于界面大小限制，不宜同时显示三个编辑器，考虑采用tab选项卡切换的方式展现。
另外考虑到页面加载速度问题（我可能是个性能狂），找了几个他人写的tab，感觉都不太理想，主要是代码量有些大，有的甚至要用特定js库。
于是我干脆自己写了一个。代码量很小，相对还算灵活吧，可以再稍加css修饰使其更加上档次。
效果图：
代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>轻量级CSS tab</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <style type="text/css"> 7 html,body{font-family:Arial;font-size:12px;text-align:center;} 8 9 .tab {width:800px;height:600px;background:#fff;margin:auto;margin-top:20px;} 10 .tab_header {height:30px;line-height:30px;margin-left:1px;} 11 .tab_normal {width:100px;height:30px;line-height:30px;margin-left:-1px;text-align:center;float:left;color:#66f;border-top:1px solid #66f;border-right:1px solid #66f;border-left:1px solid #66f;position:relative;z-index:100;border-radius:5px 5px 0 0;margin-top:1px;} 12 .tab_acvite {width:100px;height:30px;line-height:30px;margin-left:-1px;text-align:center;float:left;color:#66f;border-top:2px solid #66f;border-right:1px solid #66f;border-left:1px solid #66f;position:relative;z-index:200;border-radius:5px 5px 0 0;border-bottom:1px solid #fff;} 13 .tab_bodyer div {width:100%;height:100%;border:1px solid #66f;margin-top:2px;text-align:left;display:block;} 14 15 </style> 16 17 18 <script type="text/javascript"> 19 20 //tab 初始化、事件添加 21 function init(){ 22 var tab_header = document.getElementById("tab_header").getElementsByTagName("DIV"); 23 for(var i=0;i<tab_header.length;i++){ 24 tab_header[i].setAttribute("index",i); 25 tab_header[i].onclick=function(event){ 26 activeTab(this.getAttribute("index")); 27 } 28 } 29 activeTab(0); 30 } 31 32 //tab选中函数 33 function activeTab(index){ 34 35 var tab_header = document.getElementById("tab_header").getElementsByTagName("DIV"); 36 var tab_bodyer = document.getElementById("tab_bodyer").getElementsByTagName("DIV"); 37 for(var i=0;i<tab_header.length;i++){ 38 if(i==index){ 39 tab_header[i].className="tab_acvite"; 40 tab_bodyer[i].style.display="block"; 41 }else{ 42 tab_header[i].className="tab_normal"; 43 tab_bodyer[i].style.display="none"; 44 } 45 } 46 47 } 48 49 </script> 50 51 </head> 52 <body style="padding:0px;margin:0px;text-align:center;" onl oad="init()"> 53 54 <div class="tab"> 55 56 <div id="tab_header" class="tab_header"> 57 <div>HTML</div> 58 <div>CSS</div> 59 <div>Javascript</div> 60 <div>Console</div> 61 <div style="color:green;margin-left:10px;">Run</div> 62 <div style="float:right;">guide</div> 63 <div style="float:right;">demo</div> 64 </div> 65 <div id="tab_bodyer" class="tab_bodyer"> 66 <div style="display:none;"> 67 <br>HTML <br><br><br><br><br><br><br><br><br> 68 </div> 69 <div style="display:none;"> 70 <br>CSS <br><br><br><br><br><br><br><br><br> 71 </div> 72 <div style="display:none;"> 73 <br>Javascript <br><br><br><br><br><br><br><br><br> 74 </div> 75 <div style="display:none;"> 76 <br>Console <br><br><br><br><br><br><br><br><br> 77 </div> 78 <div style="display:none;"> 79 <br>Run <br><br><br><br><br><br><br><br><br> 80 </div> 81 <div style="display:none;"> 82 <br>content guide<br><br><br><br><br><br><br><br><br> 83 </div> 84 <div style="display:none;"> 85 <br>content demo<br><br><br><br><br><br><br><br><br> 86 </div> 87 </div> 88 89 90 91 </div> 92 93 94 95 </body> 96 97 </html>
原理：
1.tab选项和内容分别由一堆div构成，分别放到选项容器、内容容器的div里。
2.tab选项各项通过float:left，浮动显示成一排。
3.为tab选项的默认状态、被选中状态编写css样式。
4.用javascript编写选项卡点击切换事件处理代码，切换动作实际上就是修改dom的className值。
5.被选中选项卡与内容区融合效果是采用的修改底部边框颜色与选项卡margin-top综合控制的。
自创简易CSS Tab 选项卡
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。