Cross-browser common and reusable tab switch js Code

Since I recently learned some JavaScript code, I am forced to install it... It's not that difficult... Just cut the display attribute? My classmates ignored me .. I want to make a general application... What need to interact with ajax ..??? I did not understand the idea... What are you going to do... As a trainer, I made a fool of myself.
Requirement: I don't know what Shenma means... Then, let me understand it ..
① Cross-browser, IE6 +, FF, Chrome, Safari, and Opera
② Different tabs can be set for the same page with the same js.
Let's look at the code.
I. html part (in fact, this is not really nice yet. It is set to three. The first two are the same, triggered by the click event, and the last one is triggered by moving the mouse)
Copy codeThe Code is as follows:
<Div class = "tab1">
<Ul class = "name">
<Li> Project 1 </li>
<Li> Project 2 </li>
<Li> Project 3 </li>
</Ul>
<Ul class = "content">
<Li> the class is <em> "tab1" </em> Project 1, triggered by <em> "click" </em> </li>
<Li> the class is <em> "tab1" </em> Project 2, triggered by <em> "click" </em> </li>
<Li> class is <em> "tab1" </em> Project 3, triggered by <em> "click" </em> </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> the class is <em> "tab1" </em> Project 1, triggered by <em> "click" </em> </li>
<Li> the class is <em> "tab1" </em> Project 2, triggered by <em> "click" </em> </li>
<Li> class is <em> "tab1" </em> Project 3, triggered by <em> "click" </em> </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> the class is <em> "tab2" </em> Project 1, triggered by <em> "mouseover" </em> </li>
<Li> the class is <em> "tab2" </em> Project 2, triggered by <em> "mouseover" </em> </li>
<Li> class: <em> "tab2" </em> "Project 3, triggered by <em>" mouseover "</em> </li>
</Ul>
</Div>

Specifically, because I am a cainiao, The js I write can only work under a specific structure (authentic dish !), I didn't think of a general mechanism. What structure does this js need? That is, a div container in the outermost layer. The title is represented by a ul list, and the content is also a ul list. If it is not in this format, the cainiao code I wrote cannot run (course ...), To run it, you need to modify several lines of js...
Ii. Style CSS
Copy codeThe 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 it. I added some of the simplest css3 and joined it together (this artist is so bad ).
Iii. js Code
Copy codeThe Code is as follows:
/**
* Common event processing functions
*/
Var EventUtil = {
// Cross-browser event retrieval
GetEvent: function (event ){
Return event? Event: window. event;
},
// Browser used to retrieve the target DOM node of the event object
GetTarget: function (event ){
Return event.tar get | event. srcElement;
},
// Bind events to nodes across browsers
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 Switch Mode
TabSwitch ("tab1", "click ");
TabSwitch ("tab2", "mouseover ");
/**
* Tab common functions
*/
// The inClassName parameter is set to the bound option card class name, And the triggerType parameter is set to the type that triggers the switch.
Function tabSwitch (inClassName, triggerType ){
// Obtain 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 switchover function for each tab
For (var j = 0, len = tabs. length; j <len; j ++ ){
// Obtain the title and content list
Var tab = tabs [j];
// Use the private scope to create a switch for each tab
(Function (){
Var nameUl = tab. getElementsByTagName ("ul") [0];
Var content = tab. getElementsByTagName ("ul") [1];
// Initialization Tab
NameUl. getElementsByTagName ("li") [0]. className = "selected ";
Content. getElementsByTagName ("li") [0]. style. display = "block ";
// Add event Delegate
EventUtil. addHandler (nameUl, triggerType, function (event ){
// Obtain the event object
Event = EventUtil. getEvent (event );
Var target = EventUtil. getTarget (event );
// Switch tabs
If (target. nodeName. toLowerCase () = "li "){
// Obtain the title list items and content list items 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; I <len; I ++ ){
NameList [I]. className = "";
ContentList [I]. style. display = "none ";
If (nameList [I] = target ){
NameList [I]. className = "selected ";
ContentList [I]. style. display = "block ";
}
}
}
});
})();
}
}

Let's expand this js function (not shy )... First, some common functions of event objects are defined to cope with cross-browser usage. The next two rows are the function of Tab switching. One parameter is the class of the container to be defined as a tab, and the other is the type that triggers the switch.
The actual js is finished. The idea is: Containers defined as a class will be bound to a tab, and the switching method can also be customized. TabSwitch ("tab1", "click"); that is, all tab1 classes are bound as tabs and switched through the click event.
Several technologies are used for implementation switching. One is to use the class selectqueryAll to select the same type. In order to be compatible with IE6 and 7, a standby traversal version is provided (very inefficient). The other is, the event Delegate is used and the trigger event is bound to the Title List ul.
　　
I complained that when I took the ul DOM element, I used name as the variable name. As a result, the event cannot be bound to chrome or safari. It took me a long time! Very depressing...
The last question is the effect. What is the effect of this item? Is to switch tabs (nonsense ..), The selected tab title will add a class "selected" to facilitate style setting.
Finally, I would like to say that there are a lot of improvements (of course, you are not a pis God ). For example, when a class is added, the strings of the class name are connected to ensure that the original class name is not overwritten. For example, you can adapt to the structure transformation. For example (a lot of questions )...
As for what else is wrong, please give your guidance (this person is thick-faced, despite being sprayed ).
Why do I need to upload a demo? Click here to download the instance