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

本文实例讲述了js实现简洁的TAB滑动门效果代码。分享给大家供大家参考。具体如下：

这是一款滑动门代码，简洁TAB，简单的鼠标导航效果，大家或许经常见到的效果啦，鼠标放在主菜单上，下边框架内的内容会跟着变换，鼠标不需要点击，只需要滑上去就可切换内容，像一扇门，所以有时候别人叫“滑动门”菜单。

运行效果如下图所示：

在线演示地址如下：

具体代码如下：

简洁TAB

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";

}

}

}

*

{

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;

}

• ASP
• PHP2
• PHP3
• PHP4

第一块内容

第二块内容

第三块内容

第四块内容

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