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

2020-11-27 来源：赴品旅游

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

<font color=red> 
<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> 
 
 
 
 
<li>水果/水果 </li> 
 
<li>花卉/花卉/花卉</li> 
 
 
<li>汽车/汽车</li> 
<li>水果2</li> 
<li>花卉/花卉/花卉2</li> 
<li>汽车/汽车2</li> 
<li>水果3</li> 
<li>花卉/花卉3</li> 
<li>汽车/汽车/汽车3</li>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

显示全文

全部栏目

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