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 ...
随机推荐
- Zigbee折腾之旅：（一）CC2530最小系统
最近在倒腾Zigbee,准备参加物联网全国大赛,学校有给我们发Zigbee开发板,但是对于喜欢折腾的我来说,用开发板还是不过瘾,起码也得知道怎么去画一块板子.于是乎,在百度一番后就有了下面这篇文章. ...
- NodeJS链接MongDB
创建一个mongdb.js var mongodb = require('mongodb') // 创建数据库服务的链接 var server = new mongodb.Server( 'local ...
- 更改Debian Linux里面的EDT时区为CST时区
Debian按默认安装,设置的是EDT时区．这样跟我们的系统就都对不上,因此得 改回CST. 只需要两步即可: 使用vi编辑/etc/timezone,把timezone文件的内容更改为:Asia/S ...
- weui.css中flex容器下子项目的水平和垂直居中
想用weui.css写微信平台的页面,发现没有让flex(weui-flex)容器下,子项目(weui-flex__item)居中的类. 百度了一下,是用justify-content:center; ...
- Swift应用案例 1.无限轮播
从今天开始,我学习的重点开始转向Swift,并且会分享一些自己学习的心得体会,今天给大家带来的的是无限轮播.广告页的无限轮播是非常常见的一个功能,大多数APP都有,大多数程序员也都实现过,今天我们 ...
- Firefox52非HTTPS页面登录页面提示连接不安全的解决办法
背景: Firefox52版本开始,对于非HTTPS协议的登录页面,会提示链接不安全,如下图 解决办法很简单,上HTTPS协议(严重推荐,尤其是祖国这种特殊国情下,上HTTPS的协议好处多多,物超所值 ...
- JavaWeb之多语言国际化
这周打算把国际化.JDBC和XML学习一下,从下周就开始学习三大框架,再坚持一个半月吧就能入门JavaWeb了,上周周末两天过的真是生不如死,两天坐在家里,醒来就写博客,原本在公司也自己操作了一遍,其 ...
- dreamweaver破解版下载地址
dreamweaver CC 2015可以在可视化环境中设计的你网页,非常方便高效完成网页设计.Adobe Dreamweaver CC 2015支持CSS编辑器.和jQuery库代码自动完成功能等等 ...
- rem 结合 scss 移动端自适应 初级入门demo
首先说明 本篇 内容 适合初级使用 rem 开发移动端 自适应 公式计算 推导过程, 高手绕路. 目标尺寸 = rem * 根字体大小 Px = rem * (html根字体px) 根字体大 ...
- iOS开发之控制器创建与加载（生命周期）
1.如何创建一个控制器 控制器常见的创建方式有以下几种: (1)通过storyboard创建 (2)直接创建 MJViewController *mj = [[MJViewController all ...