你的位置:首页 > Java教程

[Java教程]js实现的可以通用的选项卡代码实例


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

 

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.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显示。
三.相关阅读:
1.event?event : window.event可以参阅var ev=window.event||ev的作用是什么一章节。
2. event.target||event.srcElement可以参阅javascript的srcElement事件属性和javascript的target事件属性。
3.addEventListener和attachEvent可以参阅javascript如何注册事件处理函数一章节。
4.querySelectorAll()可以参阅document.querySelectorAll()用法介绍一章节。
5.getElementsByTagName()函数可以参阅javascript的document.getElementsByTagName()一章节。
6.indexOf()函数可以参阅JavaScript的String对象的indexOf()方法一章节。
7.push()函数可以参阅JavaScript的Array对象的push()方法一章节。 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9223

更多内容可以参阅:http://www.softwhy.com/javascript/