一个级联菜单代码学习及removeClass与addClass的应用

最近在学些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>

inline onclick代码如下：复制代码代码如下: <input type="button" id="btnOK" name="" value="确定" onclick="btnOKClick();" /> btnOKClick的代码：复制代码代码如下: function btnOKClick() { alert("btnO>>>详细阅读

本文标题：一个级联菜单代码学习及removeClass与addClass的应用

地址：http://www.17bianji.com/kaifa2/JS/22441.html

1/2 1