设为首页收藏本站订阅更新
切换到窄版

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步，快速开始

无忧脚本 › 论坛 › 无忧脚本技术讨论区 › JavaScript & VBScript & DHTML 脚本技术讨论版 › 请教如下问题该如何解决？
返回列表 发新帖
查看: 1033|回复: 5

[求助] 请教如下问题该如何解决？ [复制链接]

alleen

Rank: 3Rank: 3

升级  41.33%

注册时间
2006-12-29
威望
145
阅读权限
30
积分
324
帖子
151
精华
0
UID
63335
状态
当前离线
发表于 2008-6-24 16:11:39 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
一键分享 一键分享
下面是我制作的一菜单效果，现在的问题是当我只点击一级菜单A一次的时候，一级菜单A的背景色由绿色变成了黄色，再点击一级菜单B，虽然一级菜单A隐藏起来了，但他们的背景色一样了，即如何做到当点击某一一级菜单的时候其他的一级菜单的背景色恢复默认值！
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5.         <meta http-equiv="Content-Language" content="zh-CN" />
  6.         <title> New Document </title>
  7.         <script language="javascript">
  8.         //菜单隐藏与显示
  9.         function SwitchMenu(obj){
  10.                 if(document.getElementById){
  11.                 var el = document.getElementById(obj);
  12.                 var ar = document.getElementById("Menu").getElementsByTagName("ul");
  13.                         if(el.style.display != "block"){
  14.                                 for (var i=0; i<ar.length; i++){
  15.                                         if (ar[i].className=="submenu")
  16.                                         ar[i].style.display = "none";
  17.                                 }
  18.                                 el.style.display = "block";
  19.                                 event.srcElement.className="Menutbg_2 cursor"
  20.                         }else{
  21.                                 el.style.display = "none";
  22.                                 event.srcElement.className="Menutbg_1 cursor"
  23.                         }
  24.                 }
  25.         }
  26.         </script>
  27.         <style type="text/css">
  28.         <!--
  29.         body{font-family: "宋体";font-size:12px;}
  30.         #Menu{width:140px;border:#B1DCF4 1px solid;border-top:none;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;}
  31.         .cursor{cursor:pointer;}
  32.         .submenu{display: none;}
  33.         .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;}
  34.         .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;}
  35.         -->
  36.         </style>
  37. </head>
  38. <body>
  39.         <div id="Menu">
  40.                 <div class="Menutbg_1 cursor" onclick="SwitchMenu('1')">一级菜单A</div>
  41.                 <ul id="1" class="submenu">
  42.                         <li><a href="a1.htm">A1</a></li>
  43.                         <li><a href="a2.htm">A2</a></li>
  44.                         <li><a href="a3.htm">A3</a></li>
  45.                         <li><a href="a4.htm">A4</a></li>
  46.                 </ul>
  47.                 <div class="Menutbg_1 cursor" onclick="SwitchMenu('2')">一级菜单B</div>
  48.                 <ul id="2" class="submenu">
  49.                         <li><a href="b1.htm">B1</a></li>
  50.                         <li><a href="b2.htm">B2</a></li>
  51.                 </ul>
  52.                 <div class="Menutbg_1 cursor" onclick="SwitchMenu('3')">一级菜单C</div>
  53.                 <ul id="3" class="submenu">
  54.                         <li><a href="c1.htm">C1</a></li>
  55.                         <li><a href="c2.htm">C2</A></li>
  56.                 </ul>
  57.         </div>
  58. </body>
  59. </html>
复制代码运行代码另存代码



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

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

使用道具 举报

alleen

Rank: 3Rank: 3

升级  41.33%

注册时间
2006-12-29
威望
145
阅读权限
30
积分
324
帖子
151
精华
0
UID
63335
状态
当前离线
发表于 2008-6-24 17:52:27 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
帮帮忙啊，大侠们！

使用道具 举报

biyuan

管理员

振兴无忧

Rank: 9Rank: 9Rank: 9

注册时间
2003-7-13
威望
3340
阅读权限
200
积分
7647
帖子
3120
精华
5
UID
4354
状态
当前离线
发表于 2008-6-24 18:07:20 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 查看个人网站
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5.         <meta http-equiv="Content-Language" content="zh-CN" />
  6.         <title> New Document </title>
  7.         <script language="javascript">
  8.         //菜单隐藏与显示
  9.         function SwitchMenu(obj){
  10.                 if(document.getElementById){
  11.                 var el = document.getElementById(obj);
  12.                 var ar = document.getElementById("Menu").getElementsByTagName("ul");
  13.                 var dr = document.getElementById("Menu").getElementsByTagName("div");
  14.                         for(var i = 0; i < dr.length; i ++){
  15.                                 dr[i].className = "Menutbg_1 cursor";
  16.                         }
  17.                         if(el.style.display != "block"){
  18.                                 for (var i=0; i<ar.length; i++){
  19.                                         if (ar[i].className=="submenu")
  20.                                         ar[i].style.display = "none";
  21.                                 }
  22.                                 el.style.display = "block";
  23.                                 event.srcElement.className="Menutbg_2 cursor"
  24.                         }else{
  25.                                 el.style.display = "none";
  26.                                 event.srcElement.className="Menutbg_1 cursor"
  27.                         }
  28.                 }
  29.         }
  30.         </script>
  31.         <style type="text/css">
  32.         <!--
  33.         body{font-family: "宋体";font-size:12px;}
  34.         #Menu{width:140px;border:#B1DCF4 1px solid;border-top:none;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;}
  35.         .cursor{cursor:pointer;}
  36.         .submenu{display: none;}
  37.         .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;}
  38.         .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;}
  39.         -->
  40.         </style>
  41. </head>
  42. <body>
  43.         <div id="Menu">
  44.                 <div class="Menutbg_1 cursor" onclick="SwitchMenu('1')">一级菜单A</div>
  45.                 <ul id="1" class="submenu">
  46.                         <li><a href="a1.htm">A1</a></li>
  47.                         <li><a href="a2.htm">A2</a></li>
  48.                         <li><a href="a3.htm">A3</a></li>
  49.                         <li><a href="a4.htm">A4</a></li>
  50.                 </ul>
  51.                 <div class="Menutbg_1 cursor" onclick="SwitchMenu('2')">一级菜单B</div>
  52.                 <ul id="2" class="submenu">
  53.                         <li><a href="b1.htm">B1</a></li>
  54.                         <li><a href="b2.htm">B2</a></li>
  55.                 </ul>
  56.                 <div class="Menutbg_1 cursor" onclick="SwitchMenu('3')">一级菜单C</div>
  57.                 <ul id="3" class="submenu">
  58.                         <li><a href="c1.htm">C1</a></li>
  59.                         <li><a href="c2.htm">C2</A></li>
  60.                 </ul>
  61.         </div>
  62. </body>
  63. </html>
复制代码运行代码另存代码
如果您需要提问题之前，请先尝试以下两个链接：
http://bbs.51js.com/search.php
http://bbs.51js.com/viewthread.php?tid=21031
===============================
先无忧之忧而忧，后无忧之乐而乐。

使用道具 举报

km3945

Rank: 6Rank: 6

升级  10.95%

注册时间
2003-4-12
威望
595
阅读权限
70
积分
1219
帖子
592
精华
0
UID
1885
状态
当前离线
发表于 2008-6-24 18:12:41 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
[php]
<!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.style.display=obj==ar.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>
[/php]
你叫啊！叫啊！你叫破喉咙也没人救你了！

使用道具 举报

wllllll

Rank: 6Rank: 6

升级  7.15%

注册时间
2005-8-24
威望
581
阅读权限
70
积分
1143
帖子
611
精华
0
UID
35854
状态
当前离线
发表于 2008-6-24 18:13:33 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ
兼容IE,FF
　
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5.         <meta http-equiv="Content-Language" content="zh-CN" />
  6.         <title> New Document </title>
  7.         <script language="javascript">
  8.         //菜单隐藏与显示
  9.         function SwitchMenu(event, DataTarget){
  10.                 var HaEvent = event || window.event
  11.                 var HaElement = event.target || event.srcElement
  12.                 var HaTarget = (typeof(DataTarget) == "object") ? DataTarget : document.getElementById(DataTarget)
  13.                 if(HaTarget.style.display != "block"){
  14.                         HaTarget.style.display = "block";
  15.                         HaElement.className="Menutbg_2 cursor"
  16.                        
  17.                         if ( this.Target != null ) this.Target.style.display = "none";
  18.                         if ( this.Element != null ) this.Element.className="Menutbg_1 cursor"
  19.                         this.Target = HaTarget
  20.                         this.Element = HaElement
  21.                 }
  22.         }
  23.         </script>
  24.         <style type="text/css">
  25.         <!--
  26.         body{font-family: "宋体";font-size:12px;}
  27.         #Menu{width:140px;border:#B1DCF4 1px solid;border-top:none;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;}
  28.         .cursor{cursor:pointer;}
  29.         .submenu{display: none;}
  30.         .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;}
  31.         .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;}
  32.         -->
  33.         </style>
  34. </head>
  35. <body>
  36.         <div id="Menu">
  37.                 <div class="Menutbg_1 cursor" onclick="SwitchMenu(event, '1')">一级菜单A</div>
  38.                 <ul id="1" class="submenu">
  39.                         <li><a href="a1.htm">A1</a></li>
  40.                         <li><a href="a2.htm">A2</a></li>
  41.                         <li><a href="a3.htm">A3</a></li>
  42.                         <li><a href="a4.htm">A4</a></li>
  43.                 </ul>
  44.                 <div class="Menutbg_1 cursor" onclick="SwitchMenu(event, '2')">一级菜单B</div>
  45.                 <ul id="2" class="submenu">
  46.                         <li><a href="b1.htm">B1</a></li>
  47.                         <li><a href="b2.htm">B2</a></li>
  48.                 </ul>
  49.                 <div class="Menutbg_1 cursor" onclick="SwitchMenu(event, '3')">一级菜单C</div>
  50.                 <ul id="3" class="submenu">
  51.                         <li><a href="c1.htm">C1</a></li>
  52.                         <li><a href="c2.htm">C2</A></li>
  53.                 </ul>
  54.         </div>
  55. </body>
  56. </html>
复制代码运行代码另存代码

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

使用道具 举报

alleen

Rank: 3Rank: 3

升级  41.33%

注册时间
2006-12-29
威望
145
阅读权限
30
积分
324
帖子
151
精华
0
UID
63335
状态
当前离线
发表于 2008-6-24 22:11:00 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
太感谢

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入无忧

Archiver|手机版|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445  

GMT+8, 2012-2-7 21:23 , Processed in 0.059758 second(s), 15 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 1999-2011 无忧脚本

回顶部