脚本可以在Firefox中运行，但不能在IE中运行 [英] Script working in Firefox But not in 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>

推荐答案

问题出在getElementsByName和div元素上.您会注意到document.getElementsByName将在IE中返回长度为零的数组.

http://msdn.microsoft.com/en-us/library/ms536438% 28VS.85％29.aspx [ ^ ]

由于某种原因，此函数不会返回具有该名称的DIV和SPAN类型的元素(与Firefox不同).因此，请改用ID(如果可以...)"

您可以通过几种不同的方法来执行此操作.

尽管我不建议每个小javascript问题都使用jQuery，但使用它可以很容易地处理这类切换"显示\隐藏内容，也许可以研究一下?

The issue is with getElementsByName and the div element. You''ll notice that document.getElementsByName will return a zero length array in IE.

http://msdn.microsoft.com/en-us/library/ms536438%28VS.85%29.aspx[^]

"This function does not return elements of type DIV and SPAN with that name, for some reason (unlike in Firefox). So use IDs instead (if you can...)"

There are a few different ways you can do this.

While I don''t recommend jQuery for every little javascript problem, these sort of ''toggle'' show\hide content can be handled very easily using it, maybe something to look into?

亲爱的迪伦！
感谢您调查问题.
是的，我同意您的意见，并且肯定是getElementsByName和div标签存在问题..
好吧，我现在已经解决了这个问题，供您参考，我将粘贴以下代码..
非常感谢您的宝贵时间..

Dear Dylan!
Thanks for taking a look into the issue.
Yes i agree to what you say and certainly it is a problem with the getElementsByName and the div tag..
Well i have sorted out the issue now and for your reference i will paster the code below..
Thanks a lot for your time..

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

是的，这当然是一种方法.如果您想使用jQuery，则此处的一些代码应与跨浏览器兼容&做同样的事.

Yes that''s certainly a way to do it. If you wanted to use jQuery, here''s a bit of code that should be cross browser compatible & do the same thing.

<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中运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！