js面向对象二级菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul{float: left;}
ul li{list-style: none;position: relative;}
ul li ul{display: none; cursor:pointer; position: absolute;left: -20px;top:0}
</style>
</head>
<body>
<ul id="ul">
<li class="li"><a href="#">那</a>
<ul>
<li>就</li>
<li>这</li>
<li>样</li>
<li>吧</li>
</ul>
</li>
<li class="li"><a href="#">就</a>
<ul>
<li>那</li>
<li>这</li>
<li>样</li>
<li>吧</li>
</ul>
</li>
<li class="li"><a href="#">这</a>
<ul>
<li>那</li>
<li>就</li>
<li>样</li>
<li>吧</li>
</ul>
</li>
<li class="li"><a href="#">样</a>
<ul>
<li>那</li>
<li>就</li>
<li>这</li>
<li>吧</li>
</ul>
</li>
<li class="li"><a href="#">吧</a>
<ul>
<li>那</li>
<li>就</li>
<li>这</li>
<li>样</li>
</ul>
</li>
</ul>
<script type="text/javascript">
window.onload = function(){
var Ul = new ul();
Ul.over();
}
function ul(){
this.oul = document.getElementById("ul");
this.oli = document.getElementsByClassName('li');
this.oul1 = this.oul.getElementsByTagName('ul');
}
ul.prototype.over = function(){
var This = this;
for (var i=0;i<this.oli.length;i++) {
this.oli[i].index =i;
this.oli[i].onmouseover = function(){
for (var j=0; j<This.oul1.length;j++) {
if(this.index == j){
This.oul1[j].style.display = 'block';
this.style.background = 'cadetblue';
}
}
}
this.oli[i].onmouseout = function(){
This.oul1[this.index].style.display = 'none';
this.style.background = '';
}
}
}
</script>
</body>
</html>
js面向对象二级菜单的更多相关文章
- js实现二级菜单显示和收缩
window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; ...
- JS实现的简单横向伸展二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js运动：多div变宽、二级菜单
定时器及运动函数. 多div变宽: <!-- Author: XiaoWen Create a file: 2016-12-13 09:36:30 Last modified: 2016-12- ...
- 【京东详情页】——原生js爬坑之二级菜单
一.引言 做京东详情页仿写的时候,要用原生js实现顶部菜单的二级菜单显示与隐藏事件的触发. 过程中遇到了一个坑,在这里与大家分享.要实现的效果如下: 二.坑 谁触发事件?显示.隐藏二级菜单 ...
- 鼠标经过显示二级菜单的js特效
本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- 第十五篇 JS 移入移出事件 模拟一个二级菜单
JS 移入移出事件 模拟一个二级菜单 老师演示一个特别简单二级菜单,同学们除了学习JS,还要注意它的元素和CSS样式. 这节课介绍的是JS鼠标移入.移出事件:onmouseover是移入事件,on ...
- js点击出现二级菜单，点击二级菜单主菜单换成二级菜单
点击出现二级菜单 *{ margin:0px auto; padding:0px; } .yiji{ width:200px; height:40px; background-color:red; c ...
- Jquery垂直下拉二级菜单
自己做了一个基于Jquery 的垂直下拉二级菜单功能,直接看图: Html的代码如下: <!DOCTYPE html> <html> <head> <meta ...
- JS-鼠标经过显示二级菜单
在css处添加了border样式为了看得更清楚——源代码有一个程序漏洞,存在一个很烦人的大bug. <ul class="nav"> <li class=&quo ...
随机推荐
- 学习笔记——Java核心技术之接口、继承与多态练习题
1.创建一个抽象类,验证它是否可以实例化对象. package com.lzw; public abstract class UseCase3 { abstract void doit(); publ ...
- 写好你的JavaScript
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 在实际工作中,我们应该经常会看到一些功能上没有问题,但编码风格和规范却十分糟糕的代码,这往往会让人不 ...
- 第十二篇 C# 将HTML 直接转成Excel
前些天写项目的时候,客户要求用HTML表格把信息展示出来,后面还要用展示的内容要导出Excel.本来想想在后台操作的话估计是要做死了,但是经过细想,Excel能够发布成HTML,一定也可以由HTML转 ...
- 不需要密码的windows计划任务设置
使用windows计划任务定时做些事情,确实非常方便,但创建任务时老是需要设置密码,否则在执行任务时会报80070005的系统错误导致任务无法执行. 有时windows没设密码或当账户修改密码就必须修 ...
- 3018: [Usaco2012 Nov]Distant Pastures
3018: [Usaco2012 Nov]Distant Pastures Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 43 Solved: 20[ ...
- UI 基本控件使用
一>UITextFiled ———>UITextField是什么 UITextField ( 输入框 ) : 是控制文本输入和显示的控件.在APP中UITextField 出现频率很高 ...
- Archlinux 的U盘自动装载（二）升级到 udisks2
在安装 mysql-gui-tools 过程中,发现需要用到 udisks2.udisks和udisks2可以互相替换也可以共用.最后决定换用 udisks2 安装 先卸载原来的软件,如果有的话. p ...
- vim 括号自动补全
来源:http://www.cnblogs.com/huanlei/archive/2012/04/02/2430153.html 有时要重新配置vim 的,所以收藏了: inoremap ( ()& ...
- javaScript事件（六）事件类型之滚轮事件
滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...
- JavaScript当页面关闭时向后台发送请求
今天做项目时遇上一个需求,当浏览器或页面关闭时将数据存储到数据库内.实现思想是采用js监测onunload然后发送请求.结果失败,刷新可以发送但是关闭并不能,整了一整天并没有解决,最后找到了解决办法. ...