<!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>
