<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>简洁TAB</title>
<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>
<li class="normal" onmouseover="nTabs(this,2);">PHP</li>
</ul>
</div>
<div class="TabContent">
<div id="myTab_Content0">同一页面，滑动门，选项卡同在</div>
<div id="myTab_Content1" class="none">兼容性好</div>
<div id="myTab_Content2" class="none">nicai</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>
<div class="nTab">
<div class="TabTitle">
<ul id="myTab2">
<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="myTab2_Content0">简洁TAB，滑动门，选项卡</div>
<div id="myTab2_Content1" class="none">兼容性好</div>
</div>
</div>
</body>
<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>
</html>
昨天的代码只能使用一次，不具有复用性，只能使用一次。今天重新从网上找了这个代码，JS写的很有条理性。在标签项里划分"active"与"normal"
先判断li鼠标事件状态是否为"active"状态，是的话，退出函数，否的话获取该li元素父节点的ID,因为要体现复用，这一步骤就可以得到不同id的tab。
下一步找到该父节点的所有子节点li元素，然后根据li的个数进行循环遍历，当传入的参数与li相同显示为block，否的话显示为none。即点那个就出现相关内容，
不点的隐藏。
今天的注意点有两点。1、li里面有个a标签，若要此a标签与li宽度一样，但高度不一样，需要设置display:inline-block,100%.height:a的高度。若要居中显示
还需要设置line-height:a的高度。
2.在开发者工具中如何调试JS代码，右键审查元素-》Sources，F10执行下一步代码，F11进入内联函数。