javascript鼠标滑过显示二级菜单特效

本文实例为大家分享了javascript鼠标滑过显示二级菜单效果，供大家参考，具体内容如下

1. 关键代码：

使用 switch 或 if 判断语句，改变对应的二级菜单显示方式为 block 或 none

rush:js;"> function selectTabMenu(i){ 　　switch(i){ 　　　　case 71: 　　　　　　document.getElementById("TabMenuCon71").style.display="block"; document.getElementById("TabMenuCon72").style.display="none"; document.getElementById("TabMenuCon73").style.display="none"; document.getElementById("TabMenuCon74").style.display="none"; document.getElementById("TabMenuCon75").style.display="none"; document.getElementById("TabMenuCon76").style.display="none"; break; 　　　　 　 ... 　　} }

2. 主导航 绑定事件

3. 二级菜单

　　

<

4. 完整代码

水平导航-二级菜单

<script type="text/javascript">
function selectTabMenu(i){
switch(i){
case 71:
document.getElementById("TabMenuCon71").style.display="block";
document.getElementById("TabMenuCon72").style.display="none";
document.getElementById("TabMenuCon73").style.display="none";
document.getElementById("TabMenuCon74").style.display="none";
document.getElementById("TabMenuCon75").style.display="none";
document.getElementById("TabMenuCon76").style.display="none";
break;
case 72:
document.getElementById("TabMenuCon71").style.display="none";
document.getElementById("TabMenuCon72").style.display="block";
document.getElementById("TabMenuCon73").style.display="none";
document.getElementById("TabMenuCon74").style.display="none";
document.getElementById("TabMenuCon75").style.display="none";
document.getElementById("TabMenuCon76").style.display="none";
break;
case 73:
document.getElementById("TabMenuCon71").style.display="none";
document.getElementById("TabMenuCon72").style.display="none";
document.getElementById("TabMenuCon73").style.display="block";
document.getElementById("TabMenuCon74").style.display="none";
document.getElementById("TabMenuCon75").style.display="none";
document.getElementById("TabMenuCon76").style.display="none";
break;
case 74:
document.getElementById("TabMenuCon71").style.display="none";
document.getElementById("TabMenuCon72").style.display="none";
document.getElementById("TabMenuCon73").style.display="none";
document.getElementById("TabMenuCon74").style.display="block";
document.getElementById("TabMenuCon75").style.display="none";
document.getElementById("TabMenuCon76").style.display="none";
break;
case 75:
document.getElementById("TabMenuCon71").style.display="none";
document.getElementById("TabMenuCon72").style.display="none";
document.getElementById("TabMenuCon73").style.display="none";
document.getElementById("TabMenuCon74").style.display="none";
document.getElementById("TabMenuCon75").style.display="block";
document.getElementById("TabMenuCon76").style.display="none";
break;
case 76:
document.getElementById("TabMenuCon71").style.display="none";
document.getElementById("TabMenuCon72").style.display="none";
document.getElementById("TabMenuCon73").style.display="none";
document.getElementById("TabMenuCon74").style.display="none";
document.getElementById("TabMenuCon75").style.display="none";
document.getElementById("TabMenuCon76").style.display="block";
break;
}
}

<

协会简介
• 组织机构
• 协会章程

协会新闻
• 活动预告
• 求职招聘

义务维修月
• 平面设计活动
• 程序设计活动
• 户外拓展

会员登录
• 会员注册
• 缴纳会费
• 会员信息管理
• 修改密码

PS教程
• 前端设计
• Flash教程

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文地址：https://www.jb51.cc/js/47009.html