脚本可以在Firefox中运行，但不能在IE中运行

问题描述

下面的这个脚本在firefox中可以正常使用，但是不能在Internet Explorer中执行.请复制并粘贴下面的脚本以查看它的工作情况.我需要的是如果我单击``MENU1''并且它仍然处于可见状态并且我单击``MENU2''或``MENU3''，然后上一个打开的菜单即(MENU1)应隐藏其子链接，单击的菜单应显示其子链接.因此得出的结论是，一次只能查看一组的子链接，而隐藏其余的链接..

任何帮助将不胜感激..
谢谢和问候..:thumbsup:

This Script below works perfectly in firefox but fails to execute in Internet Explorer.Kindly copy and paste the script below to see it working.What i require is if i click ''MENU1'' and it is still in visible state and i click ''MENU2'' or ''MENU3'' then the previous open Menu i.e(MENU1) should hide its sublinks and the one clicked should display its sublinks. So conclusion is that only sublinks of one group can be viewed at a time and hiding the rest..

Any help would be highly appreciated..
Thanks and Regards..:thumbsup:

<script language="JavaScript" type="text/JavaScript">
<!--
function showHide(theid)
{
    if (document.getElementById)
    {
        HideOthers(theid);
        var switch_id = document.getElementById(theid);
        if(switch_id.className == 'hide')
            {
                switch_id.className = 'show';
            }
        else
            {
            switch_id.className = 'hide';
            }
    }
}
function HideOthers(theid)
{
        if(document.getElementsByName)
        {
            var eleArray = document.getElementsByName('hideGroup');
            for(i=0;i<eleArray.length;i++)
            {
                if(eleArray[i].id != theid)
                {
                    eleArray[i].className = 'hide';
                }
            }
        }
}//-->
</script>

<style>
.hide
{
    display: none;margin-left:2px;margin-top:2px;
}
.show
    {
        display: block;margin-left:2px;margin-top:2px;
    }
</style>
<div>

<a  href="#" class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
    <div name="hideGroup" id="mymenu1" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div><br>
<a href="#" class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
    <div name="hideGroup" id="mymenu2" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div><br>
<a href="#" class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
    <div name="hideGroup" id="mymenu3" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div>
</div>

推荐答案

<script language="JavaScript" type="text/JavaScript">
function showHide(theid)
{
    if (document.getElementById)
    {
        HideOthers(theid);
        var switch_id = document.getElementById(theid);
        if(switch_id.className == 'hide')
        {
                 switch_id.className = 'show';
                    }
        else
                            {
                  switch_id.className = 'hide';
        }
    }
}
function HideOthers(theid)
{
    var eleArray;
        if(document.getElementsByName)
        {
        if(window.ActiveXObject)
            eleArray = getElementsByName_iefix('div', 'hideGroup');
        else
            eleArray = document.getElementsByName('hideGroup');

            for(i=0;i<eleArray.length;i++)

            {

                    if(eleArray[i].id != theid)

                    {

                       eleArray[i].className = 'hide';

                    }

            }

        }

}



function getElementsByName_iefix(tag, name) {



     var elem = document.getElementsByTagName(tag);

     var arr = new Array();

     for(i = 0,iarr = 0; i < elem.length; i++) {

          att = elem[i].getAttribute("name");

          if(att == name) {

               arr[iarr] = elem[i];

               iarr++;

          }

     }

     return arr;

}



</script>


<style>
.hide
{
    display: none;margin-left:2px;margin-top:2px;
    text-decoration:blink;
    background-color:#FFC
}
.show
    {
        display: block;margin-left:2px;margin-top:2px;
        text-decoration:blink;
    }
</style>
<form action="" name="test" method="post">
<div style="margin-bottom:5px">

<a  href="#" class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
    <div  name="hideGroup" id="mymenu1" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div><br>
<a href="#" class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
    <div  name="hideGroup" id="mymenu2" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div><br>
<a href="#" class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
    <div  name="hideGroup" id="mymenu3" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div>
</div>
</form>

<head>
    <script language="JavaScript" type="text/JavaScript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <style>
    .hide
    {
        display: none;
    }
    </style>
</head>
<body>
    <div>
    <a  href="#" class="menu1">Menu 1</a>
        <div id="mymenu1" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br>
    <a href="#" class="menu1">Menu 2 </a>
        <div id="mymenu2" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br>
    <a href="#" class="menu1">Menu 3 </a>
        <div id="mymenu3" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div>
    </div>
    <script language="JavaScript" type="text/JavaScript">

这篇关于脚本可以在Firefox中运行，但不能在IE中运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！