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实现GB2312文件转UTF8文件
有些书带的光盘的源代码是GB2312编码.通常IDE的编码是UTF8.这样直接导入IDE会乱码. 这时候就需要把GB2312的文件转成UTF8的文件.转化的思路很简单,读入流初始化的时候告诉jvm是G ...
- 深度神经网络（DNN）损失函数和激活函数的选择
在深度神经网络(DNN)反向传播算法(BP)中,我们对DNN的前向反向传播算法的使用做了总结.里面使用的损失函数是均方差,而激活函数是Sigmoid.实际上DNN可以使用的损失函数和激活函数不少.这些 ...
- Tinyshell: 一个简易的shell命令解释器
这是自己最近学习Linux系统编程之后写的一个练手的小程序,能很好地复习系统编程中的进程管理.信号.管道.文件等内容. 通过回顾写的过程中遇到的问题的形式记录程序的关键点,最后给出完整程序代码. 0. ...
- 华为HG8245 电信 光猫破解获取超级密码
这款光猫是 猫+无线路由器一体的 默认没有打开路由功能. 光猫背后的用户名和密码是有限制的没人什么用处,如果要打开路由功能就得要有 超级用户名和密码 不然就算收的到无线连的起也上不了网 .这时就需要 ...
- Linux 重启命令
一.Linux 的五个重启命令 1.shutdown 2.poweroff 3.init 4.reboot 5.halt 二.五个重启命令的具体说明 shutdown reboot 在linux下一些 ...
- mysql uodate select子查询
UPDATE user SET pwd='123' WHERE id in ( SELECT id from user WHERE username = 'zx' ); 报错[Err] 1093 ...
- Redis【第二篇】集群搭建
第一步:准备 1.安装包 ruby-2.4.0.tar.gz rubygems-2.6.10.tgz zlib-1.2.11.tar.gz redis-3.3.2.gem 2. 架构: 名称 IP 端 ...
- 【转】Python 中 Iterator和Iterable的区别
Python中 list,truple,str,dict这些都可以被迭代,但他们并不是迭代器.为什么? 因为和迭代器相比有一个很大的不同,list/truple/map/dict这些数据的大小是确定的 ...
- 用smarty模板做数据实现修改、分页等功能
先来看怎么把数据库的列表全都显示出来 还是要先建一个php文件,还有html文件,都存到相应的目录下 php文件中 <?php include("../init.inc.php&quo ...
- WinSCP 中普通用户以 root 身份登录 Linux
版本说明: Windows 10 CentOS 7 WinSCP 5.7.7 (Build 6257) 问题背景 使用 WinSCP 登录 CentOS 上传文件,使用的是普通用户,且已加入 sudo ...