一个级联菜单代码学习及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 相关文章推荐
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 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
用函数读出数据表内容放入二维数组
2006/10/09 PHP
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
巴西宠物商店:Cobasi
2019/04/19 全球购物
Linux中如何用命令创建目录
2016/12/02 面试题
后勤部长岗位职责
2013/12/14 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
读书演讲主持词
2014/03/18 职场文书
《泉水》教学反思
2014/04/11 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
项目负责人任命书
2014/06/04 职场文书
年终晚会活动方案
2014/08/21 职场文书
活动总结范文
2014/08/30 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
法人委托书的范本格式
2014/09/11 职场文书
给领导的感谢信范文
2015/01/23 职场文书
英文辞职信范文
2015/05/13 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
go 实现简易端口扫描的示例
2021/05/22 Golang
sql中mod()函数取余数的用法
2021/05/29 SQL Server