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"> <!-- body{font-family: "宋体";font-size:12px;} #Menu{width:140px;border:#B1DCF4 1px solid;border-top:none;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;} .cursor{cursor:pointer;} .submenu{display: none;} .Menutbg_1{background:#090 ;display: block;width:140px;height:30px;line-height:30px;border:#B1DCF4 1px solid;text-align:center;font-weight: bold;letter-spacing:3px;} .Menutbg_2{background:#FF0 ;display: block;width:140px;height:30px;line-height:30px;border:#B1DCF4 1px solid;text-align:center;font-weight: bold;color:#0F6599;letter-spacing:3px;} --> </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"> <!-- body{font-family: "宋体";font-size:12px;} #Menu{width:140px;border:#B1DCF4 1px solid;border-top:none;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;} .cursor{cursor:pointer;} .submenu{display: none;} .Menutbg_1{background:#090 ;display: block;width:140px;height:30px;line-height:30px;border:#B1DCF4 1px solid;text-align:center;font-weight: bold;letter-spacing:3px;} .Menutbg_2{background:#FF0 ;display: block;width:140px;height:30px;line-height:30px;border:#B1DCF4 1px solid;text-align:center;font-weight: bold;color:#0F6599;letter-spacing:3px;} --> </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> [提示：你可先修改部分代码，再按运行]
请稍等，评论加载中...
请稍等，评论加载中...