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.内部类仍然是一个独立的类,在编译之后内部类会被编译成独立的.class文件,但是前面冠以 ...
- pl/sql 导出oracle表结构
tools->export tables 是导出表结构还有数据 tools->export user objects是导出表结构 可以用tools->export tables ...
- 快速记录 IE8 下三个问题
快速记录 IE8 下三个问题 昨天 pc 端网站上灰度,发现多个在 IE8 下的问题,描述和解决方案如下: 第一个问题是 css 文件过大 现象 把项目所有的 css 打包成单个文件,在现代的浏览器下 ...
- Angular.js之Router学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Java显式锁学习总结之六：Condition源码分析
概述 先来回顾一下java中的等待/通知机制 我们有时会遇到这样的场景:线程A执行到某个点的时候,因为某个条件condition不满足,需要线程A暂停:等到线程B修改了条件condition,使con ...
- CSS1，CSS2选择器详解
第一.CSS1选择器: 1.元素选择器(也叫标签选择器,是最基本的选择器) <style> html{background-color: red;} div{background-colo ...
- Form表单中method="post/get'的区别
Form提供了两种数据传输的方式--get和post.虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可能会对数据产生严重的影响.虽然为了方便的得到变量值,Web容器已经屏蔽了二者的一 ...
- C# 的四舍五入
c#的四舍五入有两种情况: 1.常规四舍五入 (decimal).ToString("f2") 2.四舍六入五取偶 除1里面的其他方式四舍五入都是四舍六入五取偶.
- SQL语句使用时间和日期的函数
getdate():获取系统当前时间dateadd(datepart,number,date):计算在一个时间的基础上增加一个时间后的新时间值,比如:dateadd(yy,30,getdate())d ...
- 启动genymotion后eclipse不能正常启动adb的处理办法
很多时候在使用genymotion启动后,再在eclipse调试程序会在Console中提示 The connection to adb is down,and a server error has ...