一个级联菜单代码学习及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 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
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
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
javascript的键盘控制事件说明
2008/04/15 Javascript
js 编写规范
2010/03/03 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
node.js域名解析实现方法详解
2019/11/05 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
Python求解平方根的方法
2015/03/11 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
python中四舍五入的正确打开方式
2021/01/18 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
人力资源管理毕业生自荐信
2014/06/26 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
快速学习Oracle触发器和游标
2021/06/30 Oracle
MySQL一些常用高级SQL语句
2021/07/03 MySQL
关于python中模块和重载的问题
2021/11/02 Python
各种货币符号快捷输入
2022/02/17 杂记
LeetCode189轮转数组python示例
2022/08/05 Python