一个级联菜单代码学习及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 相关文章推荐
学习jquery之一
Apr 27 Javascript
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 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
php 阴历-农历-转换类代码
2012/01/16 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
jquery队列函数用法实例
2014/12/16 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
vue如何截取字符串
2019/05/06 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
Python中with及contextlib的用法详解
2017/06/08 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
求职自荐信范文格式
2013/11/29 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
总结表彰大会主持词
2014/03/26 职场文书
项目投资合作意向书
2014/07/29 职场文书
办公室主任岗位职责
2015/01/31 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
秋收起义观后感
2015/06/11 职场文书
高中班长竞选稿
2015/11/20 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript