1.html Code
Copy Code code as follows:
<div>
<div id= "tab" >
Div>
<DL id= "Tabcon" >
<dd> Content One </dd>
<dd> Content Two </dd>
<dd> Content Three </dd>
<dd> Content Four </dd>
</dl>
<div>
2. JS part
Copy Code code as follows:
<script type= "Text/javascript" defer= "defer" >
var tab = document.getElementById ("tab"). getElementsByTagName ("H2");
function swap (n) {
return function () {
for (var i=0; i<tab.length; i++) {
document.getElementById ("Tabcon" + i). Style.display = "None";
document.getElementById ("tab" + i). ClassName = "";
}
document.getElementById ("Tabcon" + N). Style.display = "block";
document.getElementById ("tab" + N). ClassName = "Focus";
}
}
for (var i=0; i<tab.length; i++) {
Tab[i].setattribute ("id", "tab" + i);
if (Window.addeventlistener) {
Tab[i].addeventlistener ("MouseOver", Swap (i), false);
else if (window.attachevent) {
Tab[i].attachevent ("onmouseover", Swap (i));
}
}
var Tabcon = document.getElementById ("Tabcon"). getElementsByTagName ("DD");
For (i=0 i<tabcon.length; i++) {
Tabcon[i].setattribute ("id", "tabcon" + i);
}
if (document.createevent) {
var evobj = document.createevent (' mouseevents ');
Evobj.initevent (' MouseOver ', true, false);
Tab[0].dispatchevent (Evobj);
else if (document.createeventobject) {
Tab[0].fireevent (' onmouseover ');
}
</script>