js实现简洁的TAB滑动门效果代码

本文实例讲述了js实现简洁的TAB滑动门效果代码。分享给大家供大家参考。具体如下：
这是一款滑动门代码，简洁TAB，简单的鼠标导航效果，大家或许经常见到的效果啦，鼠标放在主菜单上，下边框架内的内容会跟着变换，鼠标不需要点击，只需要滑上去就可切换内容，像一扇门，所以有时候别人叫“滑动门”菜单。
运行效果如下图所示：

在线演示地址如下：
http://demo.jb51.net/js/2015/js-tab-simple-cha-style-codes/
具体代码如下：

<html><head> <title>简洁TAB</title> <script type="text/javascript"> function nTabs（thisObj, Num） {if （thisObj.className == "active"） return;var tabObj = thisObj.parentNode.id;//赋值指定节点的父节点的id名字var tabList = document.getElementById（tabObj）.getElementsByTagName（"li"）;for （i = 0; i < tabList.length; i++） {//点击之后，其他tab变成灰色，内容隐藏，只有点击的tab和内容有属性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;height:200px;margin: 20px auto;border: 1px solid #333;overflow: hidden; } .none {display: none; } .nTab .TabTitle li {float: left;cursor: pointer;height: 35px;line-height: 35px;font-weight: bold;text-align: center;width: 124px; } .nTab .TabTitle li a {text-decoration: none; } .nTab .TabTitle .active {background-color:blue;color: #336699; } .nTab .TabTitle .normal {color: #F1AC1C; } .nTab .TabContent {clear: both;overflow: hidden;background: #fff;padding: 5px;display: block;height:100px; } </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）;">PHP2</li><li class="normal" onmouseover="nTabs（this,2）;">PHP3</li><li class="normal" onmouseover="nTabs（this,3）;">PHP4</li></ul> </div> <div class="TabContent" ><div id="myTab_Content0">第一块内容</div><div id="myTab_Content1" class="none">第二块内容</div><div id="myTab_Content2" class="none">第三块内容</div><div id="myTab_Content3" class="none">第四块内容</div> </div> </div></body></html>

希望本文所述对大家的JavaScript程序设计有所帮助。