多标签页效果 tab切换
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.tab{
float:left;
width:150px;
height:60px;
border:1px solid #ddd;
border-bottom:none;
text-align:center;
line-height:60px;
cursor:pointer;
}
#tab0,#page0{
background:#faa;
}
#tab1,#page1{
background:#afa;
}
#tab2,#page2{
background:#aaf;
}
.pageContainer{
position:relative;
clear:both
}
.pageContainer div{
position:absolute;
width:500px;
height:100px;
border:1px solid #ddd;
border-top:none
}
.topPage{
z-index:1
}
</style>
</head>
<body>
<h2>多标签页效果</h2>
<div id="tab0" class="tab" onclick="showPage(0)">10元套餐</div>
<div id="tab1" class="tab" onclick="showPage(1)">50元套餐</div>
<div id="tab2" class="tab" onclick="showPage(2)">100元套餐</div>
<div id="pageContainer" class="pageContainer">
<div id="page0" class="topPage">10元套餐详情</div>
<div id="page1">50元套餐详情</div>
<div id="page2">100元套餐详情</div>
</div>
<script type="text/javascript">
function showPage(num){
//把其他标签页的class改为page
var container = document.getElementById(‘pageContainer‘);
var divList = container.getElementsByTagName("div");
for(var i=0; i<divList.length; i++){
if(i!=num){
var div=divList[i];
div.removeAttribute("class");
}
}
//把待显示的标签页的class改为page topPage
var pageDiv = document.getElementById("page"+num);
var classNode=document.createAttribute(‘class‘);
classNode.value="topPage"
pageDiv.setAttributeNode(classNode);
}
</script>
</body>
</html>
原文：http://www.cnblogs.com/AmbiguousMiao/p/7296428.html