• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

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

JavaScript 水墨上仙 1815次浏览

最近写了一个tab菜单,这个也算是web2.0的产物了,没什么技术含量,练练手而已.

以下是tab菜单的html结构:
vhcdsdfd……………………..&nbsp
tab1,tab2就是内容,blank是填充剩下的.body是tab标签对应的内容.&nbsp

以下是javascript代码:&nbsp

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;i<t.length;i++){ 
var 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是一个二维数组,里面是一个标签题目和标签内容的形式,调用方式如下:&nbsp

<html> 
<head> 
<title>Untitled Document</title> 
</head> 
<body> 
<script src="kongjian.js"></script> 
<script> 
var a=sx.activex.tabmenu.create([["asd","wewfrwefwe"],["we","dsfsdfsdf"]]); 
document.body.appendChild(a); 
</script> 
</body> 
</html> 

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


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明javascript采用数组实现tab菜单切换效果
喜欢 (0)
加载中……