请教如下问题该如何解决？ - JavaScript & VBScript & DHTML 脚本技术讨论版 - 无忧脚本 -//体验编写HTML代码的乐趣

alleen

小恐龙

UID 63335
精华 0
积分 319
帖子 149
威望 143
阅读权限 30
注册 2006-12-29
状态离线

大中小

使用道具

发表于 2008-6-24 16:11 资料个人空间短消息加为好友

请教如下问题该如何解决？

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

<!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"); 			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>

提示：您可以先修改部分代码再运行

补充：在FF下好像没有变化效果，帮忙修改下！谢谢！

[[i] 本帖最后由 alleen 于 2008-6-24 16:14 编辑 [/i]]

alleen

小恐龙

UID 63335
精华 0
积分 319
帖子 149
威望 143
阅读权限 30
注册 2006-12-29
状态离线

大中小

使用道具

发表于 2008-6-24 17:52 资料个人空间短消息加为好友

帮帮忙啊，大侠们！

biyuan

管理员

振兴无忧

UID 4354
精华 5
积分 6939
帖子 3077
威望 3296
阅读权限 200
注册 2003-7-13
状态离线

大中小

使用道具

发表于 2008-6-24 18:07 资料个人空间主页短消息加为好友

<!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>

提示：您可以先修改部分代码再运行

如果您需要提问题之前，请先尝试以下两个链接：
http://bbs.51js.com/search.php
http://bbs.51js.com/viewthread.php?tid=21031
===============================
先无忧之忧而忧，后无忧之乐而乐。

km3945

霸王龙

UID 1885
精华 0
积分 1216
帖子 591
威望 595
阅读权限 70
注册 2003-4-12
状态离线

大中小

使用道具

发表于 2008-6-24 18:12 资料个人空间短消息加为好友

[复制]

Code:



<!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>

你叫啊！叫啊！你叫破喉咙也没人救你了！

wllllll

大恐龙

UID 35854
精华 0
积分 990
帖子 531
威望 535
阅读权限 50
注册 2005-8-24
状态离线

大中小

使用道具

发表于 2008-6-24 18:13 资料个人空间短消息加为好友

兼容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">	//菜单隐藏与显示	function SwitchMenu(event, DataTarget){		var HaEvent = event || window.event		var HaElement = event.target || event.srcElement		var HaTarget = (typeof(DataTarget) == "object") ? DataTarget : document.getElementById(DataTarget)		if(HaTarget.style.display != "block"){			HaTarget.style.display = "block";			HaElement.className="Menutbg_2 cursor"						if ( this.Target != null ) this.Target.style.display = "none";			if ( this.Element != null ) this.Element.className="Menutbg_1 cursor"			this.Target = HaTarget			this.Element = HaElement		}	}	</script>	<style type="text/css">		</style></head><body>	<div id="Menu">		<div class="Menutbg_1 cursor" onclick="SwitchMenu(event, '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(event, '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(event, '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>

提示：您可以先修改部分代码再运行

[[i] 本帖最后由 wllllll 于 2008-6-24 18:15 编辑 [/i]]

alleen

小恐龙

UID 63335
精华 0
积分 319
帖子 149
威望 143
阅读权限 30
注册 2006-12-29
状态离线

大中小

使用道具

发表于 2008-6-24 22:11 资料个人空间短消息加为好友

太感谢