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


Posted in Javascript onNovember 18, 2020

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

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 相关文章推荐
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
vue实现购物车案例
May 30 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 #Javascript
分享jQuery封装好的一些常用操作
Jul 28 #Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 #Javascript
利用JS实现数字增长
Jul 28 #Javascript
灵活使用数组制作图片切换js实现
Jul 28 #Javascript
AngularJS 中文API参考手册
Jul 28 #Javascript
AngularJS 简单应用实例
Jul 28 #Javascript
You might like
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
用PHP编写和读取XML的几种方式
2013/01/12 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
php中的依赖注入实例详解
2019/08/14 PHP
php写app用的框架整理
2019/09/29 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
Js组件的一些写法
2010/09/10 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
win7安装python生成随机数代码分享
2013/12/27 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
戴森英国官网:Dyson英国
2019/05/07 全球购物
思想汇报范文
2013/11/04 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
个人党性分析总结
2015/03/05 职场文书
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python