简洁TAB效果，一个网页同时出现选项卡和动门的代码，有一些朋友问到了这个题目，现在这段代码可以帮你开拓一下思路。颜色搭配是随便弄的，请自己调整一下。
<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{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">同一页面，滑动门，选项卡同在</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>
所属频道：菜单导航特效/更新时间：2012-11-23