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

来源：无忧脚本时间：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>

标签：菜单,下拉,背景

投稿

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

猜你喜欢

python实现微信小程序用户登录、模板推送

python 解决mysql where in 对列表(list,,array)问题

CSS+asp仿迅雷人气指数

python让列表倒序输出的实例

如何利用Python给自己的头像加一个小国旗（小月饼）

python算法深入理解风控中的KS原理

盲人站长深恶痛绝的onfocus=”this.blur()”

python妹子图简单爬虫实例

python之cur.fetchall与cur.fetchone提取数据并统计处理操作

Tensorflow累加的实现案例

Python+OpenCV实现图像的全景拼接

Python简单连接MongoDB数据库的方法

python3.8+django2+celery5.2.7环境准备(python测试开发django)

go gin 正确读取http response body内容并多次使用详解

Python实现全局变量的两个解决方法

使用Python下载Bing图片（代码）

JavaScript数组去重的几种方法

python中合并两个文本文件并按照姓名首字母排序的例子

关于ASP循环表格的问题之解答[比较详细]

如何利用python和DOS获取wifi密码