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 ...
随机推荐
- python的解释器spython介绍
Python解释器spython介绍 简介 出于个人爱好和某种需求,我再16年对python的解释器产生了浓厚兴趣,并且下定决心重新实现一个版本.我个人再游戏服务器开发中,对c++嵌入lua和pyth ...
- angular.js之作用域scope'@','=','&'
<!doctype html> <html ng-app='myApp'> <head> </head> <body> <script ...
- 整理 - .Net系统预定义的委托们
大部分情况下,我们可以使用系统预定义的委托类型,而不需要自己再来手动定义. 以下委托都位于System命名空间下. 传入参数.返回值的类型,大都被声明为泛型. 1.Action系列 有0-16个参数, ...
- 存储可靠性技术之 --RAID
云计算项目交付时,不可避免的需要考虑存储磁盘采用何种RAID.例如:我们的项目工程师可能会建议大家连接克隆虚拟机系统盘组RAID 10,完整复制虚拟机数据盘 使用RAID5或者RAID6等,那么RAI ...
- DbUtils类基本使用
一.commons-dbutils简介 commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化 ...
- 每一个程序员都应该知道的高并发处理技巧、创业公司如何解决高并发问题、互联网高并发问题解决思路、caoz大神多年经验总结分享
本文来源于caoz梦呓公众号高并发专辑,以图形化.松耦合的方式,对互联网高并发问题做了详细解读与分析,"技术在短期内被高估,而在长期中又被低估",而不同的场景和人员成本又导致了巨头 ...
- Ubuntu14.04： Error found when loading /root/.profile
问题描述: 启用root账号登录后系统出现如下提示信息: Error found when loading /root/.profile stdin:is not a tty 解决方法: 在终端中用命 ...
- Linux下，Nginx的安装、升级及动态添加模块
系统基于ubuntu server 14.04.4 amd64 安装 第一步 下载并解压Nginx压缩包 从Nginx官网下载Nginx,或者在Linux上执行wget http://nginx.or ...
- 1067: [SCOI2007]降雨量
1067: [SCOI2007]降雨量 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 2148 Solved: 554[Submit][Status] ...
- 新学期的第一节Android课
老师问,你们认为师生关系是什么样子的? 机智的我很快想到啦:或许是猫和老鼠的关系吧,嘿嘿O(∩_∩)O