JavaScript uses arrays to implement tab menu switching effect_navigation menu

I recently wrote a tab menu, which can be considered a product of web2.0. It has no technical content and is just for practice.

The following is the html structure of the tab menu:
< div id="a">

vhcdsdfd.. ........................

tab1 and tab2 are the content, blank is the rest of the filling. body is the content corresponding to the tab tag.

The following is javascript Code :

Copy code The code is as follows:

sx.activex.tabmenu={
create:function(t){
var a=document.createElement("div");
var head=document.createElement("div");
var body=document.createElement( "div");
var blank=document.createElement("span");
a.style.height="200px";
a.style.width="300px";
/ /a.style.border="1px red solid";
head.style.height="15%";
//head.style.overflow="hidden";
head.style.width ="100%";
blank.style.width=100-20*t.length "%";
blank.style.height="100%";
blank.style.borderBottom=" 1px red solid";
blank.style.lineHeight=parseInt(a.style.height)*0.15 "px";;
body.innerHTML=t[0][1];
body.style .height="85%";
body.style.padding="10px";
body.style.border="1px red solid";
body.style.borderTop="0px";
for(var i=0;ivar tab=document.createElement("span");
tab.style.border="1px red solid";
tab.style.width="20%";
tab.style.lineHeight=parseInt(a.style.height)*0.15 "px";
tab.style.textAlign="center";
tab.style.height="100%";
tab.style.backgroundColor="yellow";
tab.style.cursor="hand";
tab.innerHTML=t[i][ 0];
tab.onclick=function(r){
return function(){
for(var i1 in head.all){
if(head.all[i1]!=this && head.all[i1].tagName=="SPAN")
head.all[i1].style.borderBottom="1px red solid";
this.style.borderBottom="0px";

}
body.innerHTML=t[r][1];
}
}(i);
head.appendChild(tab);;
}
head.firstChild.style.borderBottom="0px";
head.appendChild(blank);
a.appendChild(head);
a.appendChild(body);
return a;
}
}

The parameter t passed in is a two-dimensional array, which contains a label title and label content. The calling method is as follows:

Copy code The code is as follows: