JS控制显示/隐藏二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}
#nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; width:100px;}
a{ text-decoration:none; color:#000; display:block;}
a:hover{ color:#F00; background-color:#666;}
ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}
ul li ul{ display:none; }
</style>
<script type="text/javascript">
function ShowSub(li) {
var subMenu = li.getElementsByTagName("ul")[0] ;
subMenu.style.display = "block";
}
function HideSub(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li onmouseover='ShowSub(this)' onmouseout='HideSub(this)' ><a href="#">课程大厅</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Html/CSS</a></li>
</ul>
</li>
<li ? ><a href="#">学习中心</a>
<ul>
<li><a href="#">视频学习</a></li>
<li><a href="#">实例练习</a></li>
<li><a href="#">问与答</a></li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
JS控制显示/隐藏二级菜单的更多相关文章
- Js控制显示、隐藏文本框中的密码
Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...
- JS控制DIV隐藏显示
转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...
- 【京东详情页】——原生js爬坑之二级菜单
一.引言 做京东详情页仿写的时候,要用原生js实现顶部菜单的二级菜单显示与隐藏事件的触发. 过程中遇到了一个坑,在这里与大家分享.要实现的效果如下: 二.坑 谁触发事件?显示.隐藏二级菜单 ...
- vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏
vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...
- js控制tr 隐藏 显示
tr td 外面不要套div <tr> <td>排期确定结果: </td> <td> <label class="liradio&quo ...
- js中按钮控制显示隐藏以及下拉功能
<script> function show() { var a2=document.getElementById("div2"); if(a2.style.displ ...
- 基于jquery封装通用的控制显示隐藏的方法
应用场景 在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写 ...
- js点击出现二级菜单，点击二级菜单主菜单换成二级菜单
点击出现二级菜单 *{ margin:0px auto; padding:0px; } .yiji{ width:200px; height:40px; background-color:red; c ...
- CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏
曾经写显示隐藏老是用jq方法控制: dom.show(); dom.hide(); 事实上这样还是有非常多缺陷的. 这是html结构: <div class="holi"&g ...
随机推荐
- 如何在Sitecore CMS中管理桌面快捷方式
当您在Sitecore的桌面模式下工作时,创建快捷方式很有用.快捷方式允许您在选择特定项目的情况下打开内容编辑器,而无需深入了解内容树. Sitecore 8 Sitecore 7 Sitecore ...
- C# 自定义用户控件
上篇:控件制作 本例是制作一个简单的自定义控件,然后用一个简单的测试程序,对于初学者来说,本例子比较简单,只能起到抛石引玉的效果.我也是在学习当中,今后会将自己所学的逐步写出来和大家交流共享. 第一步 ...
- JTable的模型
2018-11-04 23:15:21开始写 模型类 import javax.swing.table.DefaultTableModel;//导入包 public class LocalTableM ...
- uvalive 3415 Guardian Of Decency
题意: 有一个老师想组织学生出去旅游,为了避免他们之间有情侣产生,他制定了一系列的条件,满足这些条件之一,那么这些人理论上就不会成为情侣: 身高相差40cm:性别相同:喜欢的音乐风格不同:最喜欢的运动 ...
- 20155228 2016-2017-2 《Java程序设计》第1周学习总结
20155228 2016-2017-2 <Java程序设计>第1周学习总结 教材学习内容总结 这部分内容是以教材为基础,根据个人的理解来描述的,有的地方的理解和表述可能不规范甚至不正确, ...
- python 查询文本文件的层次
I/O系统有一系列的层次构建而成 下面是操作一个文本文件的例子来查看这种层次 >>> f = open('sample.txt','w') >>> f <_i ...
- mybatis源码解析2---SqlSessionFactoryBuilder、SqlSessionFactory解析
1.先看一个mybatis最简单的Demo String resource = "mybatis-config.xml"; //1.流形式读取mybatis配置文件 InputSt ...
- python自定义方法处理日志文件
从命令行界面拷贝的内容包含过个">>>",函数的作用是用正则把每两个">>>"之间的字符取出来,然后把包含“Tracebac ...
- bzoj4443 小凸玩矩阵
题目链接 二分+最大check #include<algorithm> #include<iostream> #include<cstdlib> #include& ...
- GoldenGate 12.2抽取Oracle 12c多租户配置过程
linux下安装12c 重启linux之后,dbca PDB/CDB使用 SQL> select instance_name from v$instance; INSTANCE_NAME --- ...