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

alleen

小恐龙

UID 63335
精华 0
积分 227
帖子 106
威望 102
阅读权限 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
积分 227
帖子 106
威望 102
阅读权限 30
注册 2006-12-29
状态离线

大中小

使用道具

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

帮帮忙啊，大侠们！

biyuan

超级版主

振兴无忧

UID 4354
精华 5
积分 5353
帖子 2743
威望 2959
阅读权限 150
注册 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
积分 1143
帖子 575
威望 582
阅读权限 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
积分 883
帖子 470
威望 492
阅读权限 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]]

JavaScript个群:27521907,欢迎加入

alleen

小恐龙

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

大中小

使用道具

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

太感谢