<p>鼠标移动后，效果图：页面设计代码【内部引用了1.4版本的JQ】<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="menuTest.aspx.cs"Inherits="WebApplication1.menuTest"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p><htmlxmlns="http://www.w3.org/1999/xhtml"></p><p><headrunat="server"></p><p><title>支持Ajax无刷新更新子菜单选项DEMO</title></p><p><styletype="text/css"></p><p>*{margin:0px;padding:0px;}</p><p>ulli{font-family:'微软雅黑';list-style-type:none;font-size:14px;fl劳务派遣系统软件t:left;background-color:#ccc;border:solid1pxblack;margin-left:-1px;cursor:pointer;width:80px;text-align:center;height:30px;line-height:30px;}</p><p></style><scriptsrc="jquery-1.4.1-vsdoc.js"type="text/javascript"></script><scriptlanguage="javascript"type="text/javascript"></p><p></p><p>functionsendRequest(str)</p><p>{</p><p>varxmlHttp=newXMLHttpRequest();</p><p>str=escape(str);</p><p>xmlHttp.open("get","e.ashx?name="+str);</p><p>xmlHttp.onreadystatechange=function()</p><p>{</p><p>if(xmlHttp.readyState==4){</p><p>//从Ajax的返回信息中,更新子菜单选项.</p><p>$("#dvInfo").html(xmlHttp.responseText);</p><p>}</p><p>}</p><p>xmlHttp.send(null);</p><p>}</p><p>varflag=false;</p><p>$(function()</p><p>{</p><p>$("li").mouseover(function()</p><p>{</p><p>flag=true;</p><p>$(this).css("background-color","red").siblings().css("background-color","");</p><p>varoffsetLeftPix=this.offsetLeft;</p><p>document.getElementById("dvInfo").style.left=offsetLeftPix+'px';</p><p>$("#dvInfo").show();</p><p>vartext=$(this).text();</p><p>sendRequest(text);</p><p>//$("#dvInfo").html("<ahref='#'>"+$(this).text()+"</a> <ahref='a.aspx'>ForTest</a>'");</p><p>});</p><p>$("#dvInfo").mouseover(function()</p><p>{</p><p>flag=true;</p><p>}).mouseleave(function()</p><p>{</p><p>flag=false;</p><p>});$("#dvMenu").mouseout(function()</p><p>{</p><p>if(flag==false){</p><p>$("#dvInfo").get(0).style.display='none';</p><p>$("li").css("background-color","");</p><p>}</p><p>});</p><p>});</p><p></script></head></p><p><body></p><p><formid="form1"runat="server"></p><p><div></p><p><divid="dvMenu"></p><p><ul></p><p><li>资讯动态</li></p><p><li>产品动态</li></p><p><li>市场营销</li></p><p><li>客服中心</li></p><p><li>人力资源</li></p><p><li>交流专区</li></p><p></ul></p><p><divid="dvInfo"style="position:absolute;top:30px;display:none;border:solid1pxblack;</p><p>height:30px;line-height:30px;text-align:center;width:260px;font-family:'微软雅黑';</p><p>font-size:14px;"></p><p></div></p><p></div></p><p></div></p><p></form></p><p></body></p><p></html></p>
