常用tab切换 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>常用tab切换</title>
<style type="text/css">
.content{display:none;}
.hover{color:red;}
</style>
</head>

<body>
<span id="tab11" class="hover" onclick="toggleMenu(1,1)">tab1tab1tab1</span> <span id="tab21" onclick="toggleMenu(2,1)">tab1tab1tab1</span> <span id="tab31" onclick="toggleMenu(3,1)">tab1tab1tab1</span>
<div id="the11">
内容内容内容内容内容1
</div>
<div id="the21" class="content">
内容内容内容内容内容2
</div>
<div id="the31" class="content">
内容内容内容内容内容3
</div>
<h2 id="title0" onclick="change(0)"><span>tab2tab2tab2</span></h2>
<div id="main0">
内容内容内容内容内容1
</div>
<h2 id="title1" onclick="change(1)"><span>tab2tab2tab2</span></h2>
<div id="main1">
内容内容内容内容内容2
</div>
<h2 id="title2" onclick="change(2)"><span>tab2tab2tab2</span></h2>
<div id="main2">
内容内容内容内容内容3
</div>
<p>第二个例子如果外面有div可以根据数组索引值来设置，具体问题具体分析吧</p>
<script type="text/javascript">
function change(index){
			if(document.getElementById("main"+index).style.display=="block" || document.getElementById("main"+index).style.display==""){
			document.getElementById("main"+index).style.display="none"
			document.getElementById("title"+index).childNodes[0].className="hover"
		    }else{
			document.getElementById("main"+index).style.display="block"
			document.getElementById("title"+index).childNodes[0].className=""
		    }
}
function toggleMenu(the,id){
	for(i=1;i<=4;i++){
		if(i==the){
		document.getElementById('tab'+i+id).className ='hover';
		document.getElementById('the'+i+id).style.display = 'block';
		}else{
		document.getElementById('tab'+i+id).className = '';
		document.getElementById('the'+i+id).style.display = 'none';
		}
	}
}
</script>
</body>
</html>

 

posted @ 2012-04-20 13:30  lines  阅读(293)  评论(0)    收藏  举报