自创简易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 ...
随机推荐
- 插入Mybatis教学
------------恢复内容开始------------ 1.Mybatis的CRUD 首先第一点要注意: namespace中的包名称,一定要和mapper接口的包名称要一一对应. 有上面的图可 ...
- Linux Broadcom Bluetooth BCM43142A0 蓝牙驱动安装
Linux Broadcom Bluetooth BCM43142A0 蓝牙驱动安装 想转到Linux,奈何蓝牙鼠标不识别. 经历了4个发行版的努力(Linux Mint,Pop!OS,OpenSus ...
- Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Table 'hive.DELETEME1643159643943' doesn't exist
Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Table 'hive.DELETEME1643159643 ...
- 什么是5G垂直行业？
什么是垂直行业呢? 感觉"垂直行业"这个词在太多地方遇到,但是这个词的涵盖范围到底是什么呢? 垂直这一概念源于两条直线(或平面)的直角交叉,两条直线是相互作为参照物的.比如,我们可 ...
- File 未释放文件权柄问题处理
Unreleased Resource: Files Abstract 程序可能无法释放某个文件句柄. Explanation 程序可能无法成功释放某一个文件句柄. 资源泄露至少有两种常见的原因: - ...
- 从开源模型、框架到自研，声网 Web 端虚拟背景算法正式发布
根据研究发现,在平均 38 分钟的视频会议里面,大概会有 13 分钟左右的时间用于处理和干扰相关的事情.同时研究也表明在参加在线会议的时候,人们更加倾向于语音会议,其中一个关键原因就是大家不希望个人隐 ...
- springboot多环境开发兼容问题（Maven和boot)
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven ...
- ApplicationRunner 类说明
在开发中可能会有这样的情景.需要在容器启动的时候执行一些内容.比如读取配置文件,数据库连接之类的.SpringBoot给我们提供了两个接口来帮助我们实现这种需求.这两个接口分别为 CommandLin ...
- opencv-python 2 图像基本操作
图像的基本操作 获取并修改图像的像素值 可以通过行和列的坐标值获取该像素点的像素值.对于BGR图像,它返回一个蓝色,绿色,红色值的数组.对于灰度图像,仅返回相应的强度值. 可以用同样的方法修改像素点的 ...
- Defi开发简介
Defi开发简介 介绍 Defi是去中心化金融的缩写, 是一项旨在利用区块链技术和智能合约创建更加开放,可访问和透明的金融体系的运动. 这与传统金融形成鲜明对比,传统金融通常由少数大型银行和金融机构控 ...