Implement Universal tab Tab based on JavaScript (strong versatility) _javascript tips

Tabs are available on a large number of sites, although the form is different, but the purpose is to achieve the same, is generally in order to classify or save the web space only use, is a sharp weapon, the following is a code example of a tab, the universality is very strong, below and you share.

The code example is as follows:

<! DOCTYPE html>  

The above code implements the function of the tab, the following is a brief introduction to the implementation process.

I. Principle of realization:

Looks like a lot of code, in fact, the principle is very simple, we only briefly introduce the principle, you can see the code comments rely on their own thinking. The title of the Default Status tab is displayed, and the first title is given the specified style class, only the first one is displayed, and the other is hidden, which enables the first selected effect by default. Each tab title will be registered to specify the event handler, when the click or across the operation, can achieve the corresponding switch, mainly through traversal implementation, here is not much introduced, see code comments.

Two. Code comments:

1.var eventutil={}, declares an object direct quantity, its interior implements obtains the event object, the event source object and the event processing function binds the operation, and is compatible each big browser.
2. Getevent:function (event) {return event event:window.event;}, get the Events object, compatible with the major browsers.
3.gettarget:function (event) {return event.target| | Event.srcelement}, gets the event source object, compatible with the major browsers.
4.addhandler:function (Element,type,handler) {}, the Registration event handler function is compatible with each major browser.
5.function Tabswitch (Inclassname,triggertype) {}, this function registers the specified event handler for the specified object, has two parameters, the first argument is the style class name, is used to get the object with the class name, and the second is the event type.
6.if (Document.queryselectorall) to determine whether the browser supports Queryselectorall functions.
7.var Tabs=document.queryselectorall ("." +inclassname), and gets the object with the specified class name if supported.
8.var divs=document.getelementsbytagname ("div") to get a collection of div objects.
9.var tabs=new Array () to create an array that stores the div object with the specified style class.
10.for (Var k=0,lendiv=divs.length;k<lendiv;k++), traversing the collection of captured Div objects.
11.if (Divs[k].classname.indexof (inclassname) >-1) if the style class name of the div contains the specified style class name.
Tabs.push (Divs[k]), save this div to an array.
13.for (Var j=0,len=tabs.length;j<len;j++), which iterates through the array of Div, in this case, the class attribute value is Tab1 and tab2 Div.
14.var Tab=tabs[j], assigns a reference to a Div object to the tab.
(function () {}), declare an anonymous function, and execute.
16.var nameul=tab.getelementsbytagname ("ul") [0], get the first of the UL collection, that is, the title section of the tab.
17.var content=tab.getelementsbytagname ("ul") [1], get the Content section of the tab.
18.nameul.getelementsbytagname ("Li") [0].classname= "selected" sets the style class value of the first heading in the tab title section to selected.
19.content.getelementsbytagname ("Li") [0].style.display= "block" sets the first of the tab content section to display.
20.eventutil.addhandler (Nameul,triggertype,function (event) {}), which is the core of the Implementation tab, has three parameters, the first parameter is the UL object of the header part, and the second is the event type. The third function is the event handler to be registered.
21.var Event=eventutil.getevent (event) to get the events object.
22.var Target=eventutil.gettarget, gets the event source object.
23.if (target.nodeName.toLowerCase () = = "Li") to determine whether the label name of the event source object is Li.
24.var namelist=nameul.getelementsbytagname ("Li"), gets the tab title part of the Li element collection.
25.var contentlist=content.getelementsbytagname ("Li"), gets the tab content part of the LI element combination.
26.for (Var i=0,len=namelist.length;i<len;i++), traversing the collection of Li elements.
27.namelist.classname= "", remove each title Li element style class.
28.contentlist.style.display= "None" hides the Li in each tab content section.
29.if (Namelist==target) if the title Li for the specified index is the event source object, that is, the li that the mouse is currently clicking on or the mouse that is sliding over.
30.namelist.classname= "Selected", add the specified style class to it.
31.contentlist.style.display= "Block" to display the contents of the corresponding index li.

The above content is also more detailed, there is code, there are comments, I hope that you learn JS to implement the relevant knowledge of the TAB help.