一个级联菜单代码学习及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下通过replace字符串替换实现大小图片切换
May 22 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 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 INI配置文件的解析实现分析
2011/01/04 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
简单的JS多重继承示例
2008/03/13 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
Python中的with...as用法介绍
2015/05/28 Python
Python制作爬虫采集小说
2015/10/25 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
酒店司机岗位职责
2013/12/14 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
消防器材管理制度
2014/01/28 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
餐饮投资计划书
2014/04/25 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
企业愿景口号
2015/12/25 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python