自创简易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 1067 (42000): Invalid default value for 'xxx字段'
报错版本:mysql-5.7.35 1.报错完整提示信息: ERROR 1067 (42000): Invalid default value for 'LOCK_TIME_' 2.原因: 使用sou ...
- Git在使用过程中遇到的一些问题
git默认对文件中的大小写不敏感. 方案1: 通过配置git来达到识别文件大小写的问题.命令如下: git config core.ignorcecase false 缺点:每个仓库都需要修改. 方案 ...
- 解决手机浏览器上input 输入框导致页面放大的问题
加入以下代码在head 区,可解决此问题 <meta name="viewport" content="width=device-width, initial-sc ...
- Keepalived+HAProxy基于ACL实现单IP多域名负载功能
编译安装 HAProxy 新版 LTS 版本,编译安装 Keepalived 开启HAProxy多线程,线程数与CPU核心数保持一致,并绑定CPU核心 因业务较多避免配置文件误操作,需要按每业务一个配 ...
- 密码破解-john的使用
john类似于hashcat一样,也是一款密码破解方式,john跟专注于系统密码的破解,并且和hashcat一样在kali中自带 hash请见hash的简单使用 重要的参数 --wordlist=字典 ...
- Javaweb学习笔记第五弹
preparedStatement 防止SQL注入:将敏感字符进行转义 1.获取PreparedStatement对象 String sql="selct * from 表名 where 列 ...
- vivo 短视频用户访问体验优化实践
作者:vivo 互联网运维团队- Hu Tao 本文介绍了vivo短视频用户访问体验优化的实践思路,并简单讲解了实践背后的几点原理. 一.背景 我们平时在看抖音快手视频的时候,如果滑动到某个视频画面一 ...
- 如何在 Apinto 实现 HTTP 与gRPC 的协议转换 (下)
上文给大家详细介绍了在 Apinto 上实现 HTTP 与 gRPC 的协议转换的基本内容,本篇我们将继续讲解如何在 Apinto-Dashboard 中进行配置. 配置 Apinto Apinto ...
- 常用ADB命令使用方法
移动端操作流程 在设置中找到关于手机(或关于平板电脑) 连续点击版本号5次 在系统和更新中点击开发者选项 打开USB调试功能 PC端操作流程 打开cmd或powershell 移动到adb.exe所在 ...
- 【随笔】Axios delete传递数组问题
pre { overflow-y: auto; max-height: 300px } img { max-width: 500px; max-height: 300px } Axios delete ...