自创简易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 ...
随机推荐
- 记一次Centos7上安装VNC服务
需要部署oracle数据库,操作系统为Centos7.5,oracle数据库在linux上面部署必须要安装一些依赖包,安装好,当然可以通过静默化安装,时间紧任务重,就通过vnc服务来进行安装,桌面化操 ...
- 使用Wireshark查看HTTPS中TLS握手过程
通过使用Wireshark抓包分析TLS握手的过程,可以更容易理解和验证TLS协议,本文将先介绍Wireshark解密HTTPS流量的方法,然后分别验证TLS握手过程和TLS会话恢复的过程. 一.使用 ...
- 小白都能看懂得Xxl-job安装教程
大家好,我是咔咔 不期速成,日拱一卒 一.背景 在平时的业务场景中,经常有一些场景需要使用定时任务,比如: 某个时间点发送优惠券 发送短信等等. 批量处理数据:批量统计上个月的账单,统计上个月销售数据 ...
- vulnhub靶场之BLUESMOKE: DEVRANDOM2|bluesmoke
准备: 攻击机:虚拟机kali.本机win10. 靶机:Bluesmoke: devrandom2,下载地址:https://download.vulnhub.com/bluesmoke/Bluesm ...
- 云原生K8S精选的分布式可靠的键值存储etcd原理和实践
@ 目录 概述 定义 应用场景 特性 为何使用etcd 术语 架构 原理 读操作 写操作 日志复制 部署 单示例快速部署 多实例集群部署 静态 etcd 动态发现 常见命令 概述 定义 etcd 官网 ...
- 通知短信 API 接入全流程（超详细整理）
随着移动互联网和智能手机的普及,短信成为了一种便捷.快速且有效的通信方式,尤其在向用户发送重要信息或提醒方面具有很大的优势. 本文将会深入探讨如何在程序中接入通知短信 API 实现短信通知功能,此外, ...
- 原来还能这样看Java线程的状态及转换
作者:小牛呼噜噜 | https://xiaoniuhululu.com 计算机内功.JAVA底层.面试.职业成长相关资料等更多精彩文章在公众号「小牛呼噜噜」 大家好,我是呼噜噜,最近一直在梳理Jav ...
- $\mathcal{Mathicの代码风格}$
概述 \(#include\) 语句必须置于整个程序的开头. 不应 using namespace foo; 若有必要可以 using foo::bar; 单行字符数必须不超过\(80\). 预编译 ...
- cron语句
名称 是否必须 允许值 特殊字符 秒 是 0-59 , - * / 分 是 0-59 , - * / 时 是 0-23 , - * / 日 是 1-31 , - * ? / L W C 月 是 1-1 ...
- js模拟下拉菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...