javascript 特效实现(3)—— 鼠标滑过显示二级菜单效果
1. 关键代码：使用 switch 或 if 判断语句，改变对应的二级菜单显示方式为 block 或 none
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. 主导航 绑定事件
<ul class="nav">
<li><a href="#" onmouseover="selectTabMenu(71)">首页</a></li>
3. 二级菜单
<ul id="TabMenuCon71" class="TabMenuCon">
<li><a href="#">公告</a></li>
<li><<a href="#">信息</a></li>
</ul>
4. 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平导航-二级菜单</title>
<style type="text/css">
*{
padding:0px;
margin: 0px;
}
.navBar{
height: 30px;
background-color: #2B383E;
text-align: center;
}
ul{
list-style: none;
}
.nav li{
float: left; }
.nav li a{
display: block;
padding: 0 20px;
height: 30px;
line-height: 30px;
text-decoration: none;
color: #fff;
}
.nav li a:hover{
background-color: #fff;
color: #4DB6E7
}
.TabMenuCon{
clear: both;
display: none;
}
.TabMenuCon li{
display: inline-block;
}
</style> <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;
}
}
</script>
</head>
<body>
<div class="navBar">
<ul class="nav">
<li><a href="#" onmouseover="selectTabMenu(71)">首页</a></li>
<li><a href="#" onmouseover="selectTabMenu(72)">关于协会</a></li>
<li><a href="#" onmouseover="selectTabMenu(73)">协会动态</a></li>
<li><a href="#" onmouseover="selectTabMenu(74)">协会活动</a></li>
<li><a href="#" onmouseover="selectTabMenu(75)">会员</a></li>
<li><a href="#" onmouseover="selectTabMenu(76)">资源空间</a></li>
</ul> </div>
<div id="TabMenuCon">
<ul id="TabMenuCon71" class="TabMenuCon">
<li><a href="#">公告</a></li>
<li><<a href="#">信息</a></li>
</ul>
<ul id="TabMenuCon72" class="TabMenuCon">
<li>协会简介</li>
<li>组织机构</li>
<li>协会章程</li>
</ul>
<ul id="TabMenuCon73" class="TabMenuCon">
<li>协会新闻</li>
<li>活动预告</li>
<li>求职招聘</li>
</ul>
<ul id="TabMenuCon74" class="TabMenuCon">
<li>义务维修月</li>
<li>平面设计活动</li>
<li>程序设计活动</li>
<li>户外拓展</li>
</ul>
<ul id="TabMenuCon75" class="TabMenuCon">
<li>会员登录</li>
<li>会员注册</li>
<li>缴纳会费</li>
<li>会员信息管理</li>
<li>修改密码</li>
</ul>
<ul id="TabMenuCon76" class="TabMenuCon">
<li>PS教程</li>
<li>前端设计</li>
<li>Flash教程</li>
</ul>
</div>
</body>
</html>
javascript 特效实现(3)—— 鼠标滑过显示二级菜单效果的更多相关文章
- jQuery - 制作点击显示二级菜单效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 鼠标经过显示二级菜单的js特效
本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- jQuery鼠标滑过横向时间轴效果
jQuery鼠标滑过横向时间轴效果---效果图: jQuery鼠标滑过横向时间轴效果---全部代码: <!DOCTYPE html> <html> <head> & ...
- CSS控制当鼠标滑过时更换图片的效果
鼠标滑过时更换图片的效果有很多方法可以实现,在本文将为大家介绍喜爱如何通过css来实现.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
- 右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
- css样式控制鼠标滑过显示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Selenium操作示例——鼠标悬停显示二级菜单，再点击二级菜单或下拉列表
这两天在玩python中selenium,遇到一个问题,就是鼠标移动到页面中某按钮或菜单,自动弹出二级菜单或下拉菜单,再自动点击其中的二级菜单或下拉列表. 首先,手工操作:打开母校的主页 http:/ ...
- JS-鼠标经过显示二级菜单
在css处添加了border样式为了看得更清楚——源代码有一个程序漏洞,存在一个很烦人的大bug. <ul class="nav"> <li class=&quo ...
- 纯css实现鼠标感应弹出二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 点餐APP 冲刺一总结
在冲刺一的过程中,我们小组每个人的任务相对来说都比较轻松,完成的进度也比较快, 主要的原因是每个人分配的任务都比较明确,大家也很积极地去完成.当然啦,我们在实现 项目的过程中也遇到了一些麻烦,主要是最 ...
- [水煮 ASP.NET Web API2 方法论]（3-3）路由默认值
问题 如何为路由中参数设置默认值. 解决方案 不管使用属性路由还是集中式路由,ASP.NET WEB API 都可以很方便的为路由定义默认参数.在每次客户端请求的时候,如果客户端没有传这些参数,框架会 ...
- （一）Protobuf的Java使用
学习使用Protobuf,创建java文件 windows : 步骤一:两个文件:proto.exe, protobuf-Java-2.4.1.jar 步骤二:建立一个工程CreateProtoBu ...
- vmware安装mac
1.笔记本安装mac10.6 2.用VMware8,需要在mac.vmx中添加以下语句 guestOS = "darwin10"ich7m.present="TRUE&q ...
- [爬虫学习笔记]Url过滤模块UrlFilter
Url Filter则是对提取出来的URL再进行一次筛选.不同的应用筛选的标准是不一样的,比如对于baidu/google的搜索,一般不进行筛选,但是对于垂直搜索或者定向抓取的应用,那 ...
- sql:Oracle11g 表,视图,存储过程结构查询
-- Oracle 11 G --20160921 涂聚文再次修改 --Geovin Du --GetTables SELECT owner, object_name, created FROM al ...
- Win7下安装依赖lxml的python插件
博主python菜鸟,本想在win7下安装一个pyquery玩玩爬虫,折腾了好几天终于搞好了,发现python这坑不是一般的深啊. 有一部分没有截图,请谅解 python版本3.4 1.下载easy_ ...
- 跨平台的 SQL 客户端
The major update to SQL client was to move to the .NET Core networking libraries instead of the nati ...
- react与redux学习资料的整理
**重点内容**React学习 1.新手入门可以访问react的官方网站,如果英语不是特别好的同学可以访问中文版的,具体链接http://reactjs.cn/react/index.html 首页有 ...
- ServiceLocator是反模式
关于ServiceLocator模式 http://www.cnblogs.com/hwade/archive/2011/01/30/CommonServiceLocator.html 为什么是Ant ...