自创简易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;" onload="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 选项卡的更多相关文章
- css Tab选项卡
css tab 选项卡据说有2中实现方式 1. target css3 2. 描点 2的 核心原理是利用描点显示问题(描点父级 overflow). <style> body,div,ul ...
- css Tab选项卡1
利用 锚点原理 以及overflow:hiden 结合,实现纯 css tab 方式 兼容ie6 + 适合单个tab 不需要js 注意点 红色方框的 a 对应a ...
- css Tab选项卡2
注意上述 红色方框 这个是锚点的变相 以及overflow:hiden结合, 利用 锚点对应 id , 也可以实现. 兼容ie6+ 适合手机tab 简单 不需要脚本 其实还可以利用 ...
- 纯CSS实现tab选项卡切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...
- 精通javascript笔记(智能社)——简易tab选项卡及应用面向对象方法实现
javascript代码(常规方式/面向过程): <script type="text/javascript"> window.onload=function(){ v ...
- 可轮播滚动的Tab选项卡
前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...
- js基础练习一之tab选项卡
最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...
- :target伪类制作tab选项卡
:target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...
- 各种效果的tab选项卡
;(function($){ $.fn.tabso=function( options ){ var opts=$.extend({},$.fn.tabso.defaults,options ); r ...
- tab选项卡-jQuery
上次用原生的js写了个tab选项卡 这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...
随机推荐
- Error parsing HTTP request header 控制台报错分析与解决
控制台报错信息: org.apache.coyote.http11.AbstractHttp11Processor process 信息: Error parsing HTTP request hea ...
- loadrunner获取时间戳
web_save_timestamp_param("tStamp", LAST); //取时间戳
- linux修改用户密码期限
1. https://www.cnblogs.com/wwwcf1982603555/p/15474557.html 设置密码复杂度: http://events.jianshu.io/p/533d3 ...
- windows中使用jenkins部署项目，后端无法启动问题
忙活一下午+一上午,问题终于解决了.找了各种办法,最终解决方式如下: 1.jenkins打包成功,到接口会报502异常 原因:后端未成功启动 解决办法: 1.刚开始使用shell命令,无法查杀进程,后 ...
- NDVI最大值合成
这里有NDVI250m分辨率的数据,目标:合成年最大值数据 [Spatial Analyst工具]|[局部分析]|[像元统计数据]
- [极客大挑战 2019]LoveSQL 1
很明显这时一道SQL注入的题目 这题很简单的SQL注入题目,使用union(联合查询注入),但是缠了我很久 为什么呢?因为我们学校的waf,很多可以注入成功的语句,他都会连接被重置,或者被burpsu ...
- 示例：iptables限制ssh链接服务器
linux服务器默认通过22端口用ssh协议登录,这种不安全.今天想做限制,即允许部分来源ip连接服务器. 案例目标:通过iptables规则限制对linux服务器的登录. 处理方法:编写为sh脚本, ...
- keyclaok~keycloak存到cookie中的值和session_state
keycloak存到cookie中的值 AUTH_SESSION_ID KEYCLOAK_IDENTITY KEYCLOAK_SESSION AUTH_SESSION_ID 用户的当前session_ ...
- [ACM]Uva839-Not So Mobile(树状天平)
在输入过程中同时进行数据处理,代码简洁,效率较高 #include<iostream> #include<cstdio> using namespace std; bool s ...
- selenuim文件的下载
文件下载:谷歌浏览器则会自动实现下载,不会弹出框提示,会直接下载谷歌的默认路径:火狐浏览器下载会弹出提示框,此时火狐需要添加浏览器的配置参数信息: 火狐的相关浏览器配置参数可以通过about:conf ...