javascript采用数组实现tab菜单切换效果
更新时间：2012年12月12日 10:28:14 作者：
最近写了一个tab菜单,这个也算是web2.0的产物了,没什么技术含量,练练手而已.需要的朋友可以参考下
最近写了一个tab菜单,这个也算是web2.0的产物了,没什么技术含量,练练手而已.
以下是tab菜单的html结构:
<div id="a"><div id="head"><span id="tab1">vhc</span><span id="tab2">dsdfd</span>..........................<span id="blank"></span></div><div id="body"></div></div>
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;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是一个二维数组,里面是一个标签题目和标签内容的形式,调用方式如下:
<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>
差不多完成了,有兴趣的朋友可以去测试下.
以下是tab菜单的html结构:
<div id="a"><div id="head"><span id="tab1">vhc</span><span id="tab2">dsdfd</span>..........................<span id="blank"></span></div><div id="body"></div></div>
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;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是一个二维数组,里面是一个标签题目和标签内容的形式,调用方式如下:
复制代码 代码如下:
<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>
差不多完成了,有兴趣的朋友可以去测试下.
相关文章
js伸缩效果代码2008-05-05
一个简单的js无限级折叠菜单，这里只列出JS版本的，JQUERY版本的可以到作者发的帖子上看，权当抛砖引玉了。2011-03-03
发现上一个版本，如果数据顺序颠倒就会出现问题，现在加以改进，2008-09-09
最近做了一个通用的浮动层菜单替代函数，可以方便地把传统的 SELECT 单选菜单替换成时尚的浮动层菜单。2009-01-01
js右键菜单效果代码...2007-07-07
如果需要查询数据库,自己修改成ajax调用吧,效果会很好的.2008-08-08
基于css实现的会折叠、展开的树形菜单导航栏，很早以前写的，也没有过多美化，但是比较实用，如果想用的朋友就自己美化吧2012-12-12
几个不错的自动收缩菜单导航效果...2007-10-10
发了个韩国网站（www.firstkids.co.kr）给我，让我用CSS写一个类似这个网站的导航栏效果。思路是：背景图像定位！2009-10-10
JavaScript结合 CSS完成QQ聊天面板菜单的功能，点击某一项菜单后，开始展开，再次点击则关闭，支持多级（三级），代码中预留有用于修饰的背景图像代码，请根据你的实际需要补全，应该是非常实用的。2009-10-10
最新评论