提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript采用数组实现tab菜单切换效果

JavaScript数组 实现 效果 切换 采用 菜单 tab
2023-06-13 09:14:42 时间
最近写了一个tab菜单,这个也算是web2.0的产物了,没什么技术含量,练练手而已.

以下是tab菜单的html结构:
<divid="a"><divid="head"><spanid="tab1">vhc</span><spanid="tab2">dsdfd</span>..........................<spanid="blank"></span></div><divid="body"></div></div>
tab1,tab2就是内容,blank是填充剩下的.body是tab标签对应的内容.

以下是javascript代码:
复制代码代码如下:

sx.activex.tabmenu={
create:function(t){
vara=document.createElement("div");
varhead=document.createElement("div");
varbody=document.createElement("div");
varblank=document.createElement("span");
a.style.height="200px";
a.style.width="300px";
//a.style.border="1pxredsolid";
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="1pxredsolid";
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="1pxredsolid";
body.style.borderTop="0px";
for(vari=0;i<t.length;i++){
vartab=document.createElement("span");
tab.style.border="1pxredsolid";
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){
returnfunction(){
for(vari1inhead.all){
if(head.all[i1]!=this&&head.all[i1].tagName=="SPAN")
head.all[i1].style.borderBottom="1pxredsolid";
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);
returna;
}
}

传入的参数t是一个二维数组,里面是一个标签题目和标签内容的形式,调用方式如下:
复制代码代码如下:

<html>
<head>
<title>UntitledDocument</title>
</head>
<body>

<scriptsrc="kongjian.js"></script>

<script>
vara=sx.activex.tabmenu.create([["asd","wewfrwefwe"],["we","dsfsdfsdf"]]);

document.body.appendChild(a);

</script>
</body>
</html>

差不多完成了,有兴趣的朋友可以去测试下.

相关文章