JavaScript uses arrays to implement tab menu switching effect_navigation menu
- WBOYOriginal
- 2016-05-16 17:46:391493browse
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 :
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:
Untitled Document< /title>
It’s almost completed, interested friends can go and test it Down.
Statement:The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn