本文实例讲述了JS+CSS实现滑动切换tab菜单效果。分享给大家供大家参考。具体如下：
这是风格简单的一款JS+CSS滑动门特效代码，当鼠标滑过菜单的时候，二级菜单自动切换，鼠标不需要点击，滑动门效果是个比较流行的网页菜单效果，在网上经常可看到这种菜单的身影。本菜单在火狐、IE8、Chrome下测试通过，代码兼容性还可以，自己用的化再美化一下风格。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
var $=function(a,b){
var ID = document.getElementById(a);
var OBJ= (b)?ID.getElementsByTagName(b):ID;
return OBJ
}
var n=0;
var tab = function(MENU,BODY){
var l = MENU.length;
for(var i=0;i
MENU[i].onmouSEOver=function(a){
return function(){
MENU[n].className="label"
BODY[n].style.display = "none";
MENU[a].className="label label-selected";
BODY[a].style.display = "block";
n=a;
}
}(i);
}
}
body{font-family: "微软雅黑","SimSun","宋体","Arial Narrow";}
#header,#main,#footer{width: 1050px;background: #F1F9D9;margin: 5px auto;}
#header{height: 50px;}
#main{height: auto;}
#footer{height: 50px;}
#menu{height: 36px;padding: 2px 0 0 0;}
li{list-style: none;cursor: pointer;}
.category{margin: 0;height: 35px;border-bottom: 1px solid #b5e2f3;text-align: center;}
.label{border: 1px solid #b5e2f3;float: left;width: 100px;height: 25px;margin: 0 3px;background: #F1FEF3;padding: 9px 0 0 0;outline: 0;-moz-border-radius: 5px 5px 0 0;}
.label-selected{background: #FFF;border-bottom: 1px solid #FFF;}
#linksContent{margin-top: -1;height: 600px;padding: 10px;border: 1px solid #b5e2f3;border-top: 0;background: #FFF;}
.link{float: left;width: 180px;display: block;margin: 10px 0;}
myLinks在线学习运动休闲编程社区文化娱乐休息项目人际往来html学习编译原理人工智能算法设计开车郊游音乐MSDN编译原理科幻电影技术文档java学习html学习编译原理人工智能算法设计html学习编译原理人工智能java学习html学习算法设计
tab($("menu","li"),$("linksContent","div"));
希望本文所述对大家的javascript程序设计有所帮助。
总结
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
