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

前端之家收集整理的这篇文章主要介绍了基于JavaScript实现通用tab选项卡(通用性强)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

代码实例如下:

<Meta charset=" utf-8"> js实现的可以通用的选项卡<a href="/tag/daima/" target="_blank" class="keywords">代码</a>实例
项目一
  • 项目二
  • 项目三
    • 类为"tab1"项目一内容,通过"click"触发
    • 类为"tab1"项目二内容,通过"click"触发
    • 类为"tab1"项目三内容,通过"click"触发
    项目一
  • 项目二
  • 项目三
    • 类为"tab1"项目一内容,通过"click"触发
    项目一
  • 项目二
  • 项目三
    • 类为"tab2"项目一内容,通过"mouSEOver"触发
    • 类为"tab2"项目二内容,通过"mouSEOver"触发
    • 类为"tab2""项目三内容,通过"mouSEOver"触发

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

    一.实现原理:

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

    二.代码注释:

    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,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-1),如果div的样式类名称含有指定的样式类名称。 12. tabs.push(divs[k]),将此div存入数组。 13.for(var j=0,len=tabs.length;j属性值为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,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标题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相关文章