位置：首页>> 网络编程>> JavaScript>> 分别用两个函数实现的菜单

分别用两个函数实现的菜单

　　发布时间：2024-04-19 10:05:36　

标签：分别用两个函数实现的菜单

css+div做的菜单：一个主显示层，别的列表都隐藏着，用js函数设置列表的显示和隐藏。分别用到了两个函数，函数实现的效果是一样的，一个是参考的《css+Dhtml精髓》书上的事例，一个是找的函数。
大家帮我看看那个函数好用！还有大家还有别的更好的方法实现这个效果吗？谢谢！！

<font color=red><!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>菜单</title> <style type="text/css"> </style> <script language="javascript">//判断浏览器 browser = navigator.appName; browserNum = parseInt(navigator.appVersion); if ((browser == "Netscape") && (browserNum < 5)) { // Netscape 4.x layerRef = "document.layers['"; endLayerRef = "']"; styleRef = ""; } else if ((browser == "Netscape") && (browserNum >= 5)) { // Netscape 6 layerRef = "document.getElementById('"; styleRef = ".style"; endLayerRef = "')"; } else { // Internet Explorer layerRef = "document.all['"; endLayerRef = "']"; styleRef = ".style"; } //第一个函数 function showMenu(layerName) { // show the layer the user wants to see eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'visible'"); } function hiddenMenu(layerName) { // hidden the layer eval(layerRef + layerName + endLayerRef + styleRef + ".visibility = 'hidden'"); } //第一个函数 //第二个函数 function MM_showHideLayers() { var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; } obj.visibility=v; } } function MM_findObj(n, d) { var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p); } if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && document.getElementById) x=document.getElementById(n); return x; } //第二个函数 </script> </head> <body> <div id="nav"> <ul id="ul"> <li>水果/水果 </li> <li>花卉/花卉/花卉</li> <li>汽车/汽车</li> <li>水果2</li> <li>花卉/花卉/花卉2</li> <li>汽车/汽车2</li> <li>水果3</li> <li>花卉/花卉3</li> <li>汽车/汽车/汽车3</li> </ul> </div> <ul id="shui" onMouseOver="javascript:showMenu('shui')"; onMouseOut="javascript:hiddenMenu('shui')" > <li>苹果</li> <li>香蕉</li> <li>猕猴桃</li> <li>火龙果</li> <li>苹果2</li> <li>香蕉2</li> <li>猕猴桃2</li> <li>火龙果2</li> <li>猕猴桃3</li> <li>火龙果3</li> </ul> <ul id="hua" onmouseover="javascript:MM_showHideLayers('hua','','show')"; onmouseout="javascript:MM_showHideLayers('hua','','hide')"> <li>菊花</li> <li>玫瑰</li> <li>牡丹</li> <li>茉莉</li> <li>君子兰</li> <li>虞美人</li> <li>喇叭花2</li> <li>桂花2</li> </ul> <ul id="che" onmouseover="javascript:MM_showHideLayers('che','','show')"; onmouseout="javascript:MM_showHideLayers('che','','hide')"> <li>大众</li> <li>奥迪</li> <li>宝马</li> <li>奔驰</li> <li>保时捷</li> <li>福特</li> <li>克莱斯勒</li> <li>法拉利</li> <li>克莱斯勒2</li> <li>法拉利2</li> </ul> </body> </html> </font>

投稿

分别用两个函数实现的菜单

猜你喜欢