简单tab

antlove

浏览: 266006 次
性别:
来自: 苏州

最近访客更多访客>>

shine_fu

青山撒地方

ascii_he

terryhello

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html

html js css

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Customized Tab</title>
<style type="text/css">
	.tab{
		margin-top:2px;
		color: #5A5A5A;
		font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
		font-size: 12px;
		font-weight: bold;
		background-color:#E6E6E6;
		display:inline-block;
		padding:5px;
		width:100px;
		text-align:center;
		overflow-x:visible;
		border-top:1px solid lightGrey;
		border-left:1px solid lightGrey;
		border-right:1px solid lightGrey;
		border-top-left-radius:8px;
		border-top-right-radius:8px;
	}
	
	.tab:hover{
		border-top:1px solid #999;
		border-left:1px solid #999;
		border-right:1px solid #999;
 		background-color:#DADADA;
		cursor:pointer;
	}
	
	#selected{
 		background-color:white;
		border-bottom:1px solid white; 
 		margin-bottom:-1px;
	}
	
	.tabs{
 		border: 1px solid #AAA;
		background: #CCC;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		border-bottom-right-radius: 4px;
		margin-left:50px;
		margin-top:20px;
		width:500px;
	}
	
	.tabsContainer{
		margin-left:50px;
	}
</style>

<script type="text/javascript">
window.onload=function(){
	var divs=document.getElementsByTagName("div");
	
	var tabs=[];
	var tabsContainer=null;
	
	for(var i=0;i<divs.length;i++){
		var div=divs[i];
		if(div.className=="tab"){
			tabs.push(div);
		}
		if(div.getAttribute("name")=="tabsContainer"){
			tabsContainer=div;
		}
	}
	
	for(var i=0;i<tabs.length;i++){
		var tab=tabs[i];
		tab.onclick=function(){
			var href=this.getAttribute("href");
			
			for(var k=0;k<tabs.length;k++){
				tabs[k].removeAttribute("id");
			}
			
			this.setAttribute("id","selected");
			
			for(var n=0;n<tabsContainer.childNodes.length;n++){
				var childNode=tabsContainer.childNodes[n];
				
				if(childNode.nodeType!=1){
					continue;
				}
				if(childNode.getAttribute("name")==href){
					childNode.style.display="block";
				}else{
					childNode.style.display="none";
				}
			}
			
		};
	}
};
</script>
</head>
<body>
	<div class="tabs">
		<div class="tab" href="tab1" title="tab1" id="selected">tab1</div>
		<div class="tab" href="tab2" title="tab2">tab2</div>
		<div class="tab" href="tab3" title="tab3">tab3</div>
	</div>
	
	<div name="tabsContainer" class="tabsContainer">
		<div name="tab1" >This is content of tab1</div>
		<div name="tab2" style="display:none;">This is content of tab2</div>
		<div name="tab3" style="display:none;">This is content of tab3</div>
	</div>
</body>
</html>