JavaScript Based universal tab TAB of is widely used
- 2020-11-20 06:00:44
- OfStack
TAB in a large number of websites have applications, although the form is different, but the purpose is to achieve 1 kind, 1 general is to carry out classification or save web space only, is a sharp tool, the following is a code example of a TAB, very common, the following is to share with you 1.
Code examples are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.ofstack.com/" />
<title>js Implemented as a generic TAB code instance </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">
/**
* Event handling generic functions
*/
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;
}
}
};
/**
* Options cartoon functions
*/
// Incoming parameters inClassName Set to the TAB class name and parameters of the binding triggerType Set to the type that triggers the switch
function tabSwitch(inClassName,triggerType){
// Gets all TAB areas
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]);
}
}
}
// Create a toggle feature for each TAB
for(var j=0,len=tabs.length; j<len; j++)
{
// Gets the title and content list
var tab = tabs[j];
// Use the private scope to create a toggle for each TAB
(function(){
var nameUl = tab.getElementsByTagName("ul")[0];
var content = tab.getElementsByTagName("ul")[1];
// Initialize the TAB
nameUl.getElementsByTagName("li")[0].className = "selected";
content.getElementsByTagName("li")[0].style.display = "block";
// Add event delegate
EventUtil.addHandler(nameUl,triggerType,function(event)
{
// Get event object
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
// TAB switch
if(target.nodeName.toLowerCase() == "li")
{
// Gets the title list item and the content list item, respectively
var nameList = nameUl.getElementsByTagName("li");
var contentList = content.getElementsByTagName("li");
// Add a title selected Class and display the content
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()
{
// Set how the TAB switches
tabSwitch("tab1","click");
tabSwitch("tab2","mouseover");
}
</script>
</head>
<body>
<div class="tab1">
<ul class="name">
<li> project 1</li>
<li> project 2</li>
<li> project 3</li>
</ul>
<ul class="content">
<li> Class for <em>"tab1"</em> project 1 content , through <em>"click"</em> The trigger </li>
<li> Class for <em>"tab1"</em> project 2 content , through <em>"click"</em> The trigger </li>
<li> Class for <em>"tab1"</em> project 3 content , through <em>"click"</em> The trigger </li>
</ul>
</div>
<div class="tab1">
<ul class="name">
<li> project 1</li>
<li> project 2</li>
<li> project 3</li>
</ul>
<ul class="content">
<li> Class for <em>"tab1"</em> project 1 content , through <em>"click"</em> The trigger </li>
<li> Class for <em>"tab1"</em> project 2 content , through <em>"click"</em> The trigger </li>
<li> Class for <em>"tab1"</em> project 3 content , through <em>"click"</em> The trigger </li>
</ul>
</div>
<div class="tab2">
<ul class="name">
<li> project 1</li>
<li> project 2</li>
<li> project 3</li>
</ul>
<ul class="content">
<li> Class for <em>"tab2"</em> project 1 content , through <em>"mouseover"</em> The trigger </li>
<li> Class for <em>"tab2"</em> project 2 content , through <em>"mouseover"</em> The trigger </li>
<li> Class for <em>"tab2"</em>" project 3 content , through <em>"mouseover"</em> The trigger </li>
</ul>
</div>
</body>
</html> The above code to achieve the function of the TAB, the following is a simple introduction to the implementation process under 1.
1. Implementation Principle:
It looks like a lot of code, in fact, the principle is very simple, let's here only a simple introduction to the principle of 1, specific can refer to the code comments rely on their own thinking. In the default state, the title of the TAB is displayed, and the first title is assigned to the specified style class. The contents of the TAB are displayed only for the first title, and the rest are hidden, thus achieving the effect of the first selected in the default state. Each TAB title is registered with the specified event handler, which can be switched when clicked or crossed, mainly through traversal, which is not covered here, see the code comments.
2. Code comments:
1.var EventUtil={}, declares 1 object direct quantity, its internal implementation to obtain the operation of event object, event source object and event handler function binding, and is compatible with all major browsers.
2. getEvent:function(event){return event ? event : window.event; }, get the event object, compatible with all major browsers.
3.getTarget:function(event){return event.target||event.srcElement; }, get the event source object, compatible with all major browsers.
4.addHandler:function(element,type,handler){}, registered event handler compatible with all major browsers.
5.function tabSwitch(inClassName,triggerType){}, this function can register the specified event handler function for the specified object, with two arguments, the first argument is the name of the style class used to get the object with such a name, and the second is the event type.
6.if(document.querySelectorAll) to determine whether the browser supports the querySelectorAll function.
7.var tabs= document.querySelectorAll ("."+inClassName), gets the object with the specified class name if supported.
8.var divs= document. getElementsByTagName("div"), gets the div object collection.
9.var tabs=new Array(), creates an array that stores div objects with the specified style class.
10.for(var k=0,lenDiv=divs.length;k
<
lenDiv; k++), traverses the collection of div objects obtained.
11.if(divs[k].className.indexOf(inClassName)
>
-1), if the div style class name contains the specified style class name.
12. tabs.push(divs[k]), store this div into an array.
13.for(var j=0,len=tabs.length;j
<
len; j++), traversing the array that holds div, in this case class with attributes tab1 and tab2.
var tab=tabs[j], assigning a reference to an div object to tab.
15.(function(){})(), declare 1 anonymous function, and execute.
16.var nameUl= ES109en.getElementsByTagName ("ul")[0], gets the first item in the ul set, which is the title part of the TAB.
var content= tab. getElementsByTagName("ul")[1], gets the content section of the TAB.
18. nameUl.getElementsByTagName ("li")[0].className="selected", set the style class value for the first heading of the TAB title section to selected.
content.getElementsByTagName ("li")[0].style.display ="block", set the first part of the content section of the TAB to display.
20.EventUtil.addHandler(nameUl,triggerType,function(event){}), which is the core part of the implementation TAB, has three arguments. The first argument is the ul object in the header section, the second is the event type, and the third function is the event handler function to be registered.
21.var event= EventUtil. getEvent(event), gets the event object.
22.var target= EventUtil. getTarget(event), gets the event source object.
if(target.nodeName.toLowerCase ()=="li"), determines whether the event source object's tag name is li or not.
var nameList= nameUl. getElementsByTagName("li"), gets the set of li elements in the header section of the TAB.
25.var contentList= content. getElementsByTagName("li"), gets the li element combination in the content section of the TAB.
26.for(var i=0,len=nameList.length;i
<
len; i++), traversing the set of li elements.
27. nameList. className="", clears each heading li element style class.
28 contentList. style. display = "none", each one TAB li hidden content part.
29.if(nameList==target), if the title of the specified index li is the event source object, that is, li that the mouse is currently clicking or li that the mouse has slid over.
30.nameList.className="selected", then add the specified style class for it.
31. contentList. style. display = "block li display of the content of the corresponding index.
The above content is more detailed, there are codes, comments, I hope to help you learn js implementation TAB related knowledge.