Because recently learned a little JS, so I pretended to be forced ... It's not too hard. Just cut the display property? My classmates ignored me. Said to get a general ... What also interacts with Ajax ...?? I leng not understand ... What the hell are you doing? Right as practicing, I got one myself.
Requirements: Students mouth of the general I do not know God horse meaning ... 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.
Say too much not what meter use, look code.
One, the HTML part (in fact, this is not good-looking, set up three, the first two are the same, through the Click event Trigger, the last one through the mouse movement trigger)
Copy Code code as follows:
<div class= "Tab1" >
<ul class= "Name" >
<li> Project A </li>
<li> Project Two </li>
<li> Project Three </li>
</ul>
<ul class= "Content" >
<li> class <em> "TAB1" </em> project content, via <em> "click" </em> to Trigger </li>
<li> class <em> "TAB1" </em> item two content, via <em> "click" </em> to Trigger </li>
<li> class <em> "Tab1" </em> item three content, via <em> "click" </em> to Trigger </li>
</ul>
</div>
<div class= "Tab1" >
<ul class= "Name" >
<li> Project A </li>
<li> Project Two </li>
<li> Project Three </li>
</ul>
<ul class= "Content" >
<li> class <em> "TAB1" </em> project content, via <em> "click" </em> to Trigger </li>
<li> class <em> "TAB1" </em> item two content, via <em> "click" </em> to Trigger </li>
<li> class <em> "Tab1" </em> item three content, via <em> "click" </em> to Trigger </li>
</ul>
</div>
<div class= "TAB2" >
<ul class= "Name" >
<li> Project A </li>
<li> Project Two </li>
<li> Project Three </li>
</ul>
<ul class= "Content" >
<li> class <em> "TAB2" </em> project one content, through <em> "mouseover" </em> trigger </li>
<li> class <em> "TAB2" </em> item two content, through <em> "mouseover" </em> trigger </li>
<li> class <em> "TaB2" </em> three content, through <em> "mouseover" </em> trigger </li>
</ul>
</div>
Special statement, because I am a rookie, so I write JS can only work under a certain structure (real food!). ), did not think of how to do the ultimate universal mechanism. What kind of structure does this JS need? That is the outermost div container, the title is represented by a UL list, the content is also a UL list. If not for this format, I write the rookie code is not able to run (food ah ...) To run, it is necessary to change a few lines of JS ...
Second, style CSS
Copy Code code 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;
}
This seems to have nothing to say, add some of the simplest CSS3, make up (this art good rotten AH).
Three, JS code
Copy Code code as follows:
/**
* Event Handling Common functions
*/
var eventutil = {
Cross-browser Fetch event object events
Getevent:function (event) {
Return event? Event:window.event;
},
The browser takes the target DOM node of the event object
Gettarget:function (event) {
return event.target| | Event.srcelement;
},
To bind nodes to events 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 Tab Toggle Mode
Tabswitch ("Tab1", "click");
Tabswitch ("TaB2", "mouseover");
/**
* Option cartoons with functions
*/
The incoming parameter inclassname is set to the tab class name of the binding, and the parameter triggertype is set to the type that triggers the switch
function Tabswitch (inclassname,triggertype) {
Get all the 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]);
}
}
}
To create a switch for each tab
for (Var j=0,len=tabs.length j<len; J + +) {
Get a list of headings and content
var tab = Tabs[j];
To create a switch for each tab using a private scope
(function () {
var Nameul = tab.getelementsbytagname ("ul") [0];
var content = Tab.getelementsbytagname ("ul") [1];
Initializing a tab
Nameul.getelementsbytagname ("Li") [0].classname = "selected";
Content.getelementsbytagname ("Li") [0].style.display = "block";
To add an event delegate
Eventutil.addhandler (Nameul,triggertype,function (event) {
Get Event Object
event = Eventutil.getevent (event);
var target = Eventutil.gettarget (event);
TAB Toggle
if (target.nodeName.toLowerCase () = = "Li") {
Get title list items and content list items individually
var namelist = nameul.getelementsbytagname ("Li");
var contentlist = content.getelementsbytagname ("Li");
Title add selected class, and display 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";
}
}
}
});
})();
}
}
On this JS function, let's expand it (very not shy AH) ... First, the common functions of some event objects are defined to cope with the use of cross-browser. The next two lines are the function of the tab switch. 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 the real JS, the idea is: a container defined as a class will be bound to a tab, the way to switch can also be customized. Tabswitch ("Tab1", "click"); all TAB1 classes are bound to tabs, switching through the Click event.
Implementation of the switch to use a number of techniques, one, through the class selector selectqueryall to the same type of choice, in order to compatible with IE6, 7, made a standby traversal version (very inefficient); second, using the event delegate, in the title list UL bound the trigger event.
complained that in the UL DOM element, I used the name as the variable name, the result in the chrome and Safari can not bind the event, here for a long time ah! Very depressed ...
The last mention is effect, what effect does this thing have? is the tab switch (nonsense). , the selected tab title adds a class "selected" to facilitate styling.
Finally, I would like to say that there is really a lot to improve the place (of course, you are not pis God). For example, when a class is added, the string of the class name is guaranteed to ensure that the original class name is not overwritten. For example, you can deal with the adaptability of structural transformations. For example (a lot of questions) ...
As for what else is wrong, please master the guidance of the (this person thick-skinned, despite the spray).
According to the truth to upload demo? Click this instance to download
