简单tab

最新推荐文章于 2024-08-08 14:18:17 发布

iteye_5753

最新推荐文章于 2024-08-08 14:18:17 发布

阅读量70

点赞数

分类专栏： html 文章标签： html js css ViewUI

本文链接：https://blog.csdn.net/iteye_5753/article/details/82519526

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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.οnlοad=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.οnclick=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>

iteye_5753

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单tab

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html
复制链接

扫一扫

专栏目录