最近写了一个tab菜单,这个也算是web2.0的产物了,没什么技术含量,练练手而已.
以下是tab菜单的html结构:
vhcdsdfd..........................
tab1,tab2就是内容,blank是填充剩下的.body是tab标签对应的内容.
以下是javascript代码:
复制代码 代码如下:
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;
}
}
传入的参数t是一个二维数组,里面是一个标签题目和标签内容的形式,调用方式如下:
复制代码 代码如下:
untitled document
差不多完成了,有兴趣的朋友可以去测试下.