自创简易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 ...
随机推荐
- Postman设置Cookie参数为全局变量-环境变量设置IP参数
前提:在遇到多接口测试时,容易出现限制登录的情况 可以使用两种情况: 1.在调用其他接口前,先调用登录接口:这个方法在一般情况下可以,但是对于有些环境,比如像小程序登录时token(或cookie)是 ...
- DOC命令学习（一）
DOC命令学习(一) 命令 切换目录命令(cd) cd /d E: 查看目录命令(dir) dir #查看# 回显命令(echo) @echo offset d = %date:~0,10%set ...
- 2-2 理解const
1 const 在引用中注意不能为常量绑定一个非常量的引用 在指针中区分low-level const和top-level const const通常用于定义常量,一经定义不许修改,且使用const必 ...
- 陈大好：持续创造小而美的产品丨独立开发者 x 开放麦
本文内容来自RTE NG-Lab 计划中「独立开发者 x 开放麦」活动分享,分享嘉宾独立开发者 @陈大好. 本次活动中,来自 W2solo 独立开发者社区的管理员 @Eric Woo 也以<独立 ...
- RTC月度小报5月丨教育aPaaS灵动课堂升级、抢先体验VUE版 Agora Web SDK、声网Agora与HTC达成合作
本月亮点速览 产品与技术: 声网Agora 教育 aPaaS 灵动课堂升级 视频通话/语音通话/互动直播 Native SDK 升级上线 3.4.2 版本 视频通话/语音通话/互动直播 Web SDK ...
- WPF监听快捷键的几种方式
调用Win32 API(优先级最高,全局监听, 支持最小化失焦等情况) 那么,假如我要在一个WPF程序监听CTRL+5按键,首先在主窗口程序添加以下代码: /// <summary> // ...
- CF1801B题解
CF1801B题解 传送门 更好的阅读体验 简化题意:有 n 个商店,每个商店卖 a,b 两种商品,价格分别为 \(a_i,b_i\),你需要在每个商店买一个商品,并且不能在所有商店都买同一种商品,最 ...
- StyleGAN 调整面部表情，让虚拟人脸更生动
目录 人脸表情 调整步骤 调整结果 人脸表情 通过上一篇文章 StyleGAN 生成的人脸:https://www.cnblogs.com/tinygeeker/p/17236264.html 人脸图 ...
- urllib.parse的使用
urllib简介 urllib是pyhton自带的标准库用于网络请求库,无需安装,直接引用 通常用于爬虫开发,API(应用程序编程接口)数据获取和测试 urllib库的4大模块 urllib.requ ...
- Object.toString与Object.prototype.toString区别
1.Object原型链上的toString方法可以用于对象类型的判断,如常用的区分数组与普通对象. 例如: Object.prototype.toString.call(''); //[object ...