简洁TAB效果，一个网页同时出现选项卡和动门的代码，有一些朋友问到了这个题目，现在这段代码可以帮你开拓一下思路。颜色搭配是随便弄的，请自己调整一下。
<head>
<title>简洁TAB-www.31jz.com</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{width: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;width: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">同一页面，滑动门，选项卡同在www.31jz.com</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，滑动门，选项卡www.31jz.com</div>
<div id="myTab1_Content1" class="none">兼容性好</div>
</div>
</div>
</body>
</html>
本文地址：https://31jz.com/jzjc/831.html