一个级联菜单代码学习及removeClass与addClass的应用


Posted in Javascript onJanuary 24, 2013

最近在学些web前段的知识,看见博客园首页左侧的一个级联菜单,就想写一个demo.呵呵

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<style type="text/css"> 
* 
{ 
padding: 0px; 
margin: 0px; 
} 
.dis_none 
{ 
display: none; 
} 
.dis_block 
{ 
display: block; 
} 
.subSheet 
{ 
position: absolute; 
left: 100px; 
z-index: 10; 
width: 100px; 
} 
ul 
{ 
list-style: none; 
} 
li 
{ 
border: 1px solid blue; 
width: 100px; 
background-color: Gray; 
} 
li a 
{ 
} 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<ul> 
<li onmousemove="mouse_over(1010)" onmouseout="mouse_out(1010)"><a href="">.NET精华区</a> 
<div class="subSheet dis_none" id="1010"> 
<ul> 
<li><a href="">新手入门</a></li> 
<li><a href="">托管代码</a></li> 
<li><a href="">非托管代码</a></li> 
</ul> 
</div> 
</li> 
<li onmousemove="mouse_over(1011)" onmouseout="mouse_out(1011)"><a href="">嵌入式</a> 
<div class="subSheet dis_none" id="1011"> 
<ul> 
<li><a href="">新手入门</a></li> 
<li><a href="">嵌入式入门</a></li> 
<li><a href="">嵌入式进阶</a></li> 
</ul> 
</div> 
</li> 
<li onmousemove="mouse_over(1012)" onmouseout="mouse_out(1012)"><a href="">单片机</a> 
<div class="subSheet dis_none" id="1012"> 
<ul> 
<li><a href="">新手入门</a></li> 
<li><a href="">单片机入门</a></li> 
<li><a href="">单片机进阶</a></li> 
</ul> 
</div> 
</li> 
<li><a href="">软件测试</a></li> 
</ul> 
</div> 
</form> 
</body> 
</html> 
<script src="Scripts/jquery-1.6.3.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function mouse_over(i) { 
$("#" + i).removeClass("dis_none"); 
} 
function mouse_out(i) { 
$("#" + i).addClass("dis_none"); 
} 
</script>
Javascript 相关文章推荐
js模拟点击事件实现代码
Nov 06 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
javascript清空table表格的方法
May 14 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
js实现楼层导航功能
Feb 23 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
比较node.js和Deno
Apr 27 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 #Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 #Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 #Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 #Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 #Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 #Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 #Javascript
You might like
phpinfo 系统查看参数函数代码
2009/06/05 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
js中的面向对象入门
2017/03/06 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
Python使用django搭建web开发环境
2017/06/09 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Django中的cookie和session
2019/08/27 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
空指针到底是什么
2012/08/07 面试题
关于礼仪的演讲稿
2014/01/04 职场文书
安全生产检讨书
2014/01/21 职场文书
高中语文课后反思
2014/04/27 职场文书
个人工作主要事迹
2014/05/08 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
部队个人年终总结
2015/03/02 职场文书
合同范本之电脑出租
2019/08/13 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript