一个级联菜单代码学习及removeClass与addClass的应用
2013-01-24 00:00
519 查看
最近在学些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>
相关文章推荐
- 一个级联菜单代码学习及removeClass与addClass的应用
- removeClass,addClass的原生JS代码
- jQuery学习09---样式操作,addClass,removeClass,toggleClass
- 一个级联菜单(IE ONLY),不过代码很精简!
- js实现addClass,removeClass,hasClass的函数代码
- C#入门学习-----菜单应用(添加剂快捷方式、设置菜单项是否可用、修改菜单字体、创建级联菜单、级联菜单的动态合并)
- js实现addClass,removeClass,hasClass的函数代码
- 一个级联菜单(IE ONLY),不过代码很精简!
- Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]
- ClassTag 、Manifest、ClassManifest、TypeTag代码实战及其在Spark中的应用源码解析之Scala学习笔记-37
- jQuery学习笔记--属性 addClass removeClass
- 第46讲:ClassTag 、Manifest、ClassManifest、TypeTag代码实战及其在Spark中的应用源码解析学习笔记
- java后端解决跨域问题 新建一个filter 复制代码 public class SimpleCORSFilter implements Filter{ @Override
- 一个WinForm记事本程序(包含主/下拉/弹出菜单/打开文件/保存文件/打印/页面设置/字体/颜色对话框/剪切版操作等等控件用法以及记事本菜单事件/按键事件的具体代码)
- 初稿-学习Photoshop创建一个下载应用界面实例
- phpwind代码分析之global.php简单说明(主要学习php基础知识的应用)
- 构建一个简单的WCF应用——WCF学习笔记(1)
- 数据结构学习之多重链表的一个应用场景
- 使用原生JS实现jQuery的addClass, removeClass, hasClass函数功能