您的位置：首页 > Web前端 > JavaScript

javascript实现tab菜单切换

2009-01-17 16:25 465 查看


最近写了一个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是一个二维数组,里面是一个标签题目和标签内容的形式,调用方式如下:

[b]
<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>
[/b]

[b]差不多完成了,有兴趣的朋友可以去测试下.[/b]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航