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 ...
随机推荐
- JDBC操作数据库步骤
2018-11-04 20:23:24开始写 1.加载驱动程序(Class.forName) 2.建立连接获取数据库连接对象(DriverManager.getConnection) 3.向数据库发 ...
- MVC 翻頁的那些坑
思绪良久,最后还是决定记录一下遇到的坑,毕竟被 ‘折磨’ 了三天,关于分页,这个话题,我一开始时拒绝的,因为真正接触项目的时候,才发现每个框架都会封装一套自己的分页,毕竟相同风格的项目是不常见的,而在 ...
- TMC首秀：写作带给我生命的影响与感动
蓦然回首,写作已陪伴了我十三个年头,横跨大学.读研.工作之初.直到现在.我将分四个小乐章,分享写作给我的生命带来的影响和感动. 第一乐章:治疗与励志 说起写作的缘由,虽然可以追溯到初高中时读过的一点文 ...
- 刨根究底字符编码之—UTF-16编码方式
在网上已经转悠好几天了, 这篇文章让我知道了UTF-16的前世今生, 感谢作者https://cloud.tencent.com/developer/article/1384687 1. UTF-16 ...
- C# 复制值类型的变量和类
C#大多数基元类型包括int.float.double.和char等,注意这里不包括string,这些都是值类型.将变量声明为值类型,编译器会生成代码来分配足以容纳这个值得内存块.编译器分配内存的时候 ...
- Symfony2 学习笔记之控制器
一个controller是你创建的一个PHP函数,它接收HTTP请求(request)并创建和返回一个HTTP回复(Response).回复对象(Response)可以是一个HTML页面,一个XML文 ...
- 如何用nginx在本地把9000端口转发到80端口上
起因看到一个用java写的轻博客,于是就兴致冲冲的试用一下.由于是lnmp的环境,Nginx占用了80端口,新博客只能用其他的端口,这里选择了9000端口,本地测试没问题.总不能访问了域名然后在加上端 ...
- Django后端项目---- rest framework（4）
一.分页 试问如果当数据量特别大的时候,你是怎么解决分页的? 方式a.记录当前访问页数的数据id 方式b.最多显示120页等 方式c.只显示上一页,下一页,不让选择页码,对页码进行加密 1.基于lim ...
- Cheerleaders UVA - 11806
题目大意是: 在一个m行n列的矩形网格中放置k个相同的石子,问有多少种方法?每个格子最多放一个石子,所有石子都要用完,并且第一行.最后一行.第一列.最后一列都要有石子. 容斥原理.如果只是n * m放 ...
- Java笔记 #04# 类的初始化顺序补充
参考java中的类的初始化顺序详解 package org.sample; class Bread { Bread() { System.out.println("Bread()" ...