位置：首页>> 网络编程>> JavaScript>> 一个二级伸缩下拉菜单代码

一个二级伸缩下拉菜单代码

　来源：无忧脚本　发布时间：2008-06-24 18:12:00　

标签：菜单,下拉,背景

alleen 问：下面是我制作的一菜单效果，现在的问题是当我只点击一级菜单A一次的时候，一级菜单A的背景色由绿色变成了黄色，再点击一级菜单B，虽然一级菜单A隐藏起来了，但他们的背景色一样了，即如何做到当点击某一一级菜单的时候其他的一级菜单的背景色恢复默认值！

biyuan 答：

<!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" /><meta http-equiv="Content-Language" content="zh-CN" /><title> New Document </title><script language="javascript">//菜单隐藏与显示function SwitchMenu(obj){if(document.getElementById){var el = document.getElementById(obj);var ar = document.getElementById("Menu").getElementsByTagName("ul");var dr = document.getElementById("Menu").getElementsByTagName("div");for(var i = 0; i < dr.length; i ++){dr[i].className = "Menutbg_1 cursor";}if(el.style.display != "block"){ for (var i=0; i<ar.length; i++){if (ar[i].className=="submenu")ar[i].style.display = "none";}el.style.display = "block";event.srcElement.className="Menutbg_2 cursor"}else{el.style.display = "none";event.srcElement.className="Menutbg_1 cursor"}}}</script><style type="text/css"></style></head><body><div id="Menu"><div class="Menutbg_1 cursor" onclick="SwitchMenu('1')">一级菜单A</div><ul id="1" class="submenu"><li><a href="a1.htm">A1</a></li><li><a href="a2.htm">A2</a></li><li><a href="a3.htm">A3</a></li><li><a href="a4.htm">A4</a></li></ul><div class="Menutbg_1 cursor" onclick="SwitchMenu('2')">一级菜单B</div><ul id="2" class="submenu"><li><a href="b1.htm">B1</a></li><li><a href="b2.htm">B2</a></li></ul><div class="Menutbg_1 cursor" onclick="SwitchMenu('3')">一级菜单C</div><ul id="3" class="submenu"><li><a href="c1.htm">C1</a></li><li><a href="c2.htm">C2</A></li></ul></div></body></html>

wllllll 答：兼容IE,FF

<!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" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title> New Document </title> <script language="javascript"> //菜单隐藏与显示 var onnode=null; function SwitchMenu(obj) { var el = document.getElementById(obj); var ar = document.getElementById("Menu").getElementsByTagName("ul"); if(onnode==obj) onnode&&(onnode.className='Menutbg_1 cursor'); el.className='Menutbg_2 cursor'; var isshow for (var i=0; i<ar.length; i++) { ar[i].style.display=obj==ar[i].id?"block":"none"; } onnode=obj } </script> <style type="text/css">  </style></head><body> <div id="Menu"> <div class="Menutbg_1 cursor" onclick="SwitchMenu('1')">一级菜单A</div> <ul id="1" class="submenu"> <li><a href="a1.htm">A1</a></li> <li><a href="a2.htm">A2</a></li> <li><a href="a3.htm">A3</a></li> <li><a href="a4.htm">A4</a></li> </ul> <div class="Menutbg_1 cursor" onclick="SwitchMenu('2')">一级菜单B</div> <ul id="2" class="submenu"> <li><a href="b1.htm">B1</a></li> <li><a href="b2.htm">B2</a></li> </ul> <div class="Menutbg_1 cursor" onclick="SwitchMenu('3')">一级菜单C</div> <ul id="3" class="submenu"> <li><a href="c1.htm">C1</a></li> <li><a href="c2.htm">C2</A></li> </ul> </div></body></html>

投稿

一个二级伸缩下拉菜单代码

猜你喜欢