基于JavaScript实现通用tab选项卡(通用性强)


Posted in Javascript onJanuary 07, 2016

选项卡在大量的网站都有应用,虽然形式各有不同,但是索要达成的目的都是一样的,一般都是为了进行分类或者节省网页空间只用,算是一件利器,下面就是一个选项卡的代码实例,通用性很强,下面就和大家分享一下。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://3water.com/" />
<title>js实现的可以通用的选项卡代码实例</title>
<style type="text/css">
body {text-align:center;}
.tab1, .tab2 
{
width:350px;
margin:0 5px;
background:#CC9933;
opacity:0.5;
border-radius:5px 5px 5px 5px;
box-shadow:#CCC 4px 4px 4px;
text-align:left;
float:left;
display:inline;
}
.name 
{
list-style:none;
overflow:hidden;
}
.name li 
{
width:90px;
font:bold 16px/30px Verdana, Geneva, sans-serif;
background:#669900;
text-align:center;
border-radius:5px 5px 5px;
margin-right:5px;
float:left;
display:inline;
cursor:pointer;
}
li.selected{background:#FF9900;}
.content li 
{
height:500px;
display:none;
}
</style>
<script type="text/javascript">
/** 
* 事件处理通用函数
*/
var EventUtil={
getEvent:function(event)
{
return event ? event : window.event;
},
getTarget:function(event)
{
return event.target||event.srcElement;
},
addHandler:function(element,type,handler)
{
if(element.addEventListener)
{
element.addEventListener(type,handler,false);
}
else if(element.attachEvent)
{
element.attachEvent("on"+type,handler);
}
else
{
element["on"+type] = handler;
} 
}
};
/**
* 选项卡通用函数
*/
// 传入参数inClassName设定为绑定的选项卡类名,参数triggerType设定为触发切换的类型
function tabSwitch(inClassName,triggerType){
//取得全部选项卡区域
if(document.querySelectorAll)
{
var tabs=document.querySelectorAll("."+inClassName);
}
else
{
var divs=document.getElementsByTagName("div");
var tabs = new Array();
for(var k=0,lenDiv=divs.length;k<lenDiv;k++)
{
if(divs[k].className.indexOf(inClassName)>-1)
{
tabs.push(divs[k]);
}
}
}
//为每个选项卡建立切换功能
for(var j=0,len=tabs.length; j<len; j++)
{
//获取标题和内容列表
var tab = tabs[j];
//使用私有作用域为每个选项卡建立切换
(function(){
var nameUl = tab.getElementsByTagName("ul")[0];
var content = tab.getElementsByTagName("ul")[1];
//初始化选项卡
nameUl.getElementsByTagName("li")[0].className = "selected";
content.getElementsByTagName("li")[0].style.display = "block";
//添加事件委托
EventUtil.addHandler(nameUl,triggerType,function(event)
{
//获取事件对象
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//选项卡切换
if(target.nodeName.toLowerCase() == "li")
{
//分别取得标题列表项和内容列表项
var nameList = nameUl.getElementsByTagName("li");
var contentList = content.getElementsByTagName("li");
//标题添加selected类,并显示内容
for(var i=0,len=nameList.length; i<len; i++)
{
nameList[i].className = "";
contentList.style.display = "none";
if(nameList == target)
{
nameList.className = "selected";
contentList.style.display = "block";
}
}
}
});
})();
}
}
window.onload=function()
{
//设置选项卡切换方式
tabSwitch("tab1","click");
tabSwitch("tab2","mouseover");
}
</script>
</head>
<body>
<div class="tab1">
<ul class="name">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class="content">
<li>类为<em>"tab1"</em>项目一内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目二内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目三内容,通过<em>"click"</em>触发</li>
</ul>
</div>
<div class="tab1">
<ul class="name">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class="content">
<li>类为<em>"tab1"</em>项目一内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目二内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目三内容,通过<em>"click"</em>触发</li>
</ul>
</div>
<div class="tab2">
<ul class="name">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class="content">
<li>类为<em>"tab2"</em>项目一内容,通过<em>"mouseover"</em>触发</li>
<li>类为<em>"tab2"</em>项目二内容,通过<em>"mouseover"</em>触发</li>
<li>类为<em>"tab2"</em>"项目三内容,通过<em>"mouseover"</em>触发</li>
</ul>
</div>
</body>
</html>

以上代码实现了选项卡的功能,下面就简单介绍一下实现过程。

一.实现原理:

看上去代码一大堆,其实原理非常的简单,咱们这里只简单的介绍一下原理,具体可以参阅代码注释依靠自己的思考。在默认状态选项卡的标题是显示的,并且第一个标题并赋予指定的样式类,选项卡内容只有第一个是显示的,其他的都出于隐藏状态,这样就实现了,默认状态下第一个被选中的效果。每一个选项卡标题都会被注册指定的事件处理函数,当进行点击或者划过操作时候,能够实现相应的切换,主要是通过遍历实现的,这里不多介绍了,参阅代码注释吧。

二.代码注释:

1.var EventUtil={},声明了一个对象直接量,它的内部实现了获取事件对象,事件源对象和事件处理函数绑定的操作,并且兼容了各大浏览器。
2. getEvent:function(event){return event ? event : window.event;},获取事件对象,兼容各大浏览器。
3.getTarget:function(event){return event.target||event.srcElement;},获取事件源对象,兼容各大浏览器。
4.addHandler:function(element,type,handler){},注册事件处理函数兼容各大浏览器。
5.function tabSwitch(inClassName,triggerType){},此函数可以为指定的对象注册指定事件处理函数,具有两个参数,第一个参数是样式类名称,用来获取具有此类名的对象,第二个是事件类型。
6.if(document.querySelectorAll),用来判断浏览器是否支持querySelectorAll函数。
7.var tabs=document.querySelectorAll("."+inClassName),如果支持则获取具有指定类名称的对象。
8.var divs=document.getElementsByTagName("div"),获取div对象集合。
9.var tabs=new Array(),创建一个数组,用语存储具有指定样式类的div对象。
10.for(var k=0,lenDiv=divs.length;k<lenDiv;k++),遍历获取的div对象集合。
11.if(divs[k].className.indexOf(inClassName)>-1),如果div的样式类名称含有指定的样式类名称。
12. tabs.push(divs[k]),将此div存入数组。
13.for(var j=0,len=tabs.length;j<len;j++),遍历存有div的数组,在本例中也就是class属性值为tab1和tab2的div。
14.var tab=tabs[j],将一个div对象的引用赋值给tab。
15.(function(){})(),声明一个匿名函数,并执行。
16.var nameUl=tab.getElementsByTagName("ul")[0],获取ul集合中的第一个,也就是选项卡的标题部分。
17.var content=tab.getElementsByTagName("ul")[1],获取选项卡的内容部分。
18.nameUl.getElementsByTagName("li")[0].className="selected",将选项卡标题部分的第一个标题的样式class值设置为selected。
19.content.getElementsByTagName("li")[0].style.display="block",将选项卡内容部分的第一个设置为显示。
20.EventUtil.addHandler(nameUl,triggerType,function(event){}),此函数是实现选项卡的核心部分,具有三个参数,第一个参数是标题部分的ul对象,第二个是事件类型,第三个函数是要被注册的事件处理函数。
21.var event=EventUtil.getEvent(event),获取事件对象。
22.var target=EventUtil.getTarget(event),获取事件源对象。
23.if(target.nodeName.toLowerCase()=="li"),判断事件源对象的标签名称是否是li。
24.var nameList=nameUl.getElementsByTagName("li"),获取选项卡标题部分li元素集合。
25.var contentList=content.getElementsByTagName("li"),获取选项卡内容部分li元素结合。
26.for(var i=0,len=nameList.length;i<len;i++),遍历li元素集合。
27.nameList.className="",将每一个标题li元素样式类清除。
28.contentList.style.display="none",将每一个选项卡内容部分的li隐藏。
29.if(nameList==target),如果指定索引的标题li就是为事件源对象,也就是说鼠标当前点击的li或者鼠标滑过的li。
30.nameList.className="selected",那么就为它添加指定的样式类。
31.contentList.style.display="block",将对应索引的内容li显示。

以上内容介绍的还算比较详细,有代码,有注释,希望对大家学习js实现选项卡相关知识有所帮助。

Javascript 相关文章推荐
jquery实现图片翻页效果
Dec 23 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 Javascript
vue使用video插件vue-video-player详解
Oct 23 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 #Javascript
JavaScript设计模式初探
Jan 07 #Javascript
JavaScript类型系统之Object详解
Jan 07 #Javascript
7个去伪存真的JavaScript面试题
Jan 07 #Javascript
jQuery表格插件datatables用法详解
Nov 23 #Javascript
详解JavaScript UTC时间转换方法
Jan 07 #Javascript
jQuery formValidator表单验证
Jan 07 #Javascript
You might like
hadoop中一些常用的命令介绍
2013/06/19 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
PHP 实现缩略图
2021/03/09 PHP
JavaScript基本对象
2007/01/11 Javascript
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python实现udp数据报传输的方法
2014/09/26 Python
Python数据类型学习笔记
2016/01/13 Python
python中正则的使用指南
2016/12/04 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
大学生毕业鉴定
2014/01/31 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
python读取mat文件生成h5文件的实现
2022/07/15 Python