Cross-browser common and reusable tab switching js code_javascript skills

Since I have recently learned some js, I pretended to be cool. . . It's not too difficult. . . Just change the display attribute? My classmates ignored me. . He said he wanted to make a universal one. . . Why interact with ajax? . ? ? ? I didn't understand. . . What on earth is going on? . . Just for practice, I made one myself.
Demand: I don’t know what my classmates mean by “general”. . . Then I will follow my own understanding. .
　①Cross-browser, IE6, FF, Chrome, Safari, Opera
　　②The same page can use the same js to set different tabs.
It’s useless to talk too much, let’s take a look at the code.
1. HTML part (Actually, this is nothing interesting. There are three settings. The first two are the same, triggered by click events, and the last one is triggered by mouse movement)

Copy code The code is as follows:

• Project one


• Project two


• Project three




• The class is"tab1"Item one content, through"click"Trigger


• The class is"tab1"The second item content is triggered by"click"Trigger ;/ul>
  

• Project 1
  
• Project 2


• Project 3

• The class is"tab1"Item one content, which is triggered by"click"

< li>The class is"tab1"Item 2 content is triggered by"click"

• The class is< em>"tab1"Item three content is triggered by"click"

• Project 1


• Project 2< /li>
  
• Project 3

;"tab2"Item one content, triggered by"mouseover"

• The class is"tab2"< /em>The content of item two is triggered by"mouseover"


• The class is"tab2""Item three Content, triggered by"mouseover"

Special statement, due to I am a novice, so the js I write can only work under a certain structure (really good! ), I didn’t think about how to create an ultimate universal mechanism. What structure does this js need? That is the outermost div container, the title is represented by an ul list, and the content is also an ul list. If it were not in this format, the novice code I wrote would not be able to run. To run it, I would have to change a few lines of js. . .
2. Style CSS

Copy code The code is as follows: 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;
}


There seems to be nothing to say about this, so I just added some simple CSS3 and made do (the art is so bad).
3. js code

Copy code The code is as follows:

/**
* General function for event processing
*/
var EventUtil = {
//Get event object across browsers event
getEvent : function(event){
return event ? event : window.event;
},
//Browser gets the target DOM node of the event object
getTarget : function(event){
return event.target||event.srcElement;
},
//Cross-browser Bind events to nodes
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;
}
}
};
//Set the tab switching method
tabSwitch("tab1","click");
tabSwitch("tab2","mouseover");
/**
* Tab common functions
*/
// The incoming parameter inClassName is set to the bound tab class name, and the parameter triggerType is set to the type of trigger switch
function tabSwitch(inClassName,triggerType){
//Get all options Card area
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; kif(divs[k].className.indexOf(inClassName) > ; -1){
tabs.push(divs[k]);
}
}
}
//Create switching function for each tab
for(var j =0,len=tabs.length; j//Get title and content list
var tab = tabs[j];
//Use private scope for each option Card creation switch
(function(){
var nameUl = tab.getElementsByTagName("ul")[0];
var content = tab.getElementsByTagName("ul")[1];
//Initialize 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 switching
if(target.nodeName.toLowerCase() == "li"){
//Get the title list item and content list item respectively
var nameList = nameUl.getElementsByTagName("li");
var contentList = content.getElementsByTagName("li");
//Add the selected class to the title and display the content
for(var i=0, len=nameList.length; inameList[i].className = "";
contentList[i].style.display = "none";
if(nameList[i ] == target){
nameList[i].className = "selected";
contentList[i].style.display = "block";
}
}
}
});
})();
}
}

Let’s expand on this js function (not shy). . . First, some common functions of event objects are defined to cope with cross-browser use. The next two lines are the tab switching functions. One parameter is the class to be defined as the container for the tab, and one is the type that triggers the switch.
The end is real js. The idea is: a container defined as a certain class will be bound to a tab, and the switching method can also be customized. tabSwitch("tab1","click"); means that all tab1 classes are bound to tabs and switched through click events.
Several technologies are used to implement switching. First, the same type is selected through the class selector selectqueryAll. In order to be compatible with IE6 and 7, a backup traversal version is made (very inefficient); second, events are used The delegate binds the trigger event on the title list ul.
　
Let me complain. When I retrieved the DOM element of ul, I used name as the variable name. As a result, the event could not be bound in Chrome and Safari. It took me a long time to do this! Very depressing. . .
The last thing to mention is the effect. What effect does this thing have? It's just tab switching (nonsense...). A class "selected" will be added to the selected tab title to facilitate setting styles.
Finally, I want to say that there are really a lot of areas for improvement (of course, you are not the god of pis). For example, when adding a class, the string concatenation of the class name ensures that the original class name is not overwritten. For example, you can deal with the adaptability to structural changes. For example (so many questions). . .
As for what else is wrong, please give me guidance (this person is thick-skinned, feel free to complain).
Is it reasonable to upload a demo? Click here to download the example