基于JavaScript实现通用tab选项卡(通用性强)
选项卡在大量的网站都有应用，虽然形式各有不同，但是索要达成的目的都是一样的，一般都是为了进行分类或者节省网页空间只用，算是一件利器，下面就是一个选项卡的代码实例，通用性很强，下面就和大家分享一下。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<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实现选项卡相关知识有所帮助。
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端，一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手，前端能做的太少。而且由于源码的暴露，攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的，本文的许多方法，用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码，有需要的小伙伴可以参考下。...2016-01-20
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办，不知道具体解决办法的下面跟小编一起来看看。 因项目需要，需要Node.js与PHP做接口调用，发现nod...2017-07-06
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下...2016-05-09
- 系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解，感兴趣的朋友一起学习吧...2015-12-29
- 为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么基于js代码如何实现的呢？下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下...2016-03-03
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- v-for标签可以用来遍历数组，将数组的每一个值绑定到相应的视图元素中去，下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。...2017-06-15
- 使用require('crypto')调用加密模块。加密模块需要底层系统提供OpenSSL的支持。它提供了一种安全凭证的封装方式，可以用于HTTPS安全网络以及普通HTTP连接。该模块还提供了一套针对OpenSSL的hash（哈希），hmac（密钥哈希），cipher...2014-06-07