一个级联菜单代码学习及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 Form.elements[i]的使用实例
Nov 13 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
VUE重点问题总结
Mar 19 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
vue实现选中效果
Oct 07 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中的字符串函数
2006/11/24 PHP
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
jquery实现聊天机器人
2020/02/08 jQuery
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
python实现异步回调机制代码分享
2014/01/10 Python
Python with用法实例
2015/04/14 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
中文系学生自荐信范文
2013/11/13 职场文书
采购主管工作职责
2013/12/12 职场文书
测试工程师程序员求职信范文
2014/02/20 职场文书
读书活动实施方案
2014/03/10 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
任命书怎么写
2015/03/02 职场文书
中学生自我评价范文
2015/03/03 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python