<!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>
<title>简洁TAB</title>
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
thisObj.className = "active";
document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
tabList[i].className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
</script>
<style type="text/css">
<!--
*{margin:0;padding:0;list-style:none;font-size:14px}
.nTab{500px;margin:20px auto;background:#aaa;border:1px solid #333;overflow:hidden}
.none {display:none;}
.nTab .TabTitle li{float:left;cursor:pointer;height:30px;line-height:30px;font-weight:bold;text-align:center;124px}
.nTab .TabTitle li a{text-decoration:none;}
.nTab .TabTitle .active{background:#ccc;color:#336699}
.nTab .TabTitle .normal{background:#666;color:#fff}
.nTab .TabContent{clear:both;overflow:hidden;background:#fff;padding:5px;display:block}
-->
</style>
</head>
<body>
<div class="nTab">
<div class="TabTitle">
<ul id="myTab">
<li class="active" onmouseover="nTabs(this,0);">ASP</li>
<li class="normal" onmouseover="nTabs(this,1);">PHP</li>
</ul>
</div>
<div class="TabContent">
<div id="myTab_Content0">同一页面，滑动门，选项卡同在</div>
<div id="myTab_Content1" class="none">兼容性好</div>
</div>
</div>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简洁TAB</title>
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
thisObj.className = "active";
document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
tabList[i].className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
</script>
<style type="text/css">
<!--
*{margin:0;padding:0;list-style:none;font-size:14px}
.nTab{500px;margin:20px auto;background:#aaa;border:1px solid #333;overflow:hidden}
.none {display:none;}
.nTab .TabTitle li{float:left;cursor:pointer;height:30px;line-height:30px;font-weight:bold;text-align:center;124px}
.nTab .TabTitle li a{text-decoration:none;}
.nTab .TabTitle .active{background:#ccc;color:#336699}
.nTab .TabTitle .normal{background:#666;color:#fff}
.nTab .TabContent{clear:both;overflow:hidden;background:#fff;padding:5px;display:block}
-->
</style>
</head>
<body>
<div class="nTab">
<div class="TabTitle">
<ul id="myTab">
<li class="active" onmouseover="nTabs(this,0);">ASP</li>
<li class="normal" onmouseover="nTabs(this,1);">PHP</li>
</ul>
</div>
<div class="TabContent">
<div id="myTab_Content0">同一页面，滑动门，选项卡同在</div>
<div id="myTab_Content1" class="none">兼容性好</div>
</div>
</div>
<div class="nTab">
<div class="TabTitle">
<ul id="myTab1">
<li class="active" onclick="nTabs(this,0);">ASP</li>
<li class="normal" onclick="nTabs(this,1);">PHP</li>
</ul>
</div>
<div class="TabContent">
<div id="myTab1_Content0">简洁TAB，滑动门，选项卡</div>
<div id="myTab1_Content1" class="none">兼容性好</div>
</div>
</div>
</body>
</html>
<div class="TabTitle">
<ul id="myTab1">
<li class="active" onclick="nTabs(this,0);">ASP</li>
<li class="normal" onclick="nTabs(this,1);">PHP</li>
</ul>
</div>
<div class="TabContent">
<div id="myTab1_Content0">简洁TAB，滑动门，选项卡</div>
<div id="myTab1_Content1" class="none">兼容性好</div>
</div>
</div>
</body>
</html>