javascript - IE Javascript 样式显示不工作

Question

我有两个div，一个的display属性默认是block，另一个没有。当您单击一个按钮时，显示会切换，因此一个隐藏，另一个显示。它适用于除 IE 之外的所有浏览器。知道为什么会这样吗？是不是和IE的innerHTML问题有关？我将粘贴 js 和 html

JavaScript:

function show(id, elm){
    var hide = document.getElementById(id);
    var show;
    var closeIcon = document.getElementById("closeIcon");
    if(id.substring(0, 3) != "set"){
        elmName = "set"+id.substring(0, 1).toUpperCase() + id.substring(1, id.length); 
        if(id != "video")   hide.style.display = "none";
        show = document.getElementById(elmName);
        show.style.display = "block";
        $("#instruccionBox").hide();
        $("#flechaEdit").hide();
    }else{
        elmName = id.substring(3, 4).toLowerCase() + id.substring(4, id.length); 
        hide.style.display = "none"; 
        show = document.getElementById(elmName);
        show.style.display = "block";
        $("#instruccionBox").show();
        $("#flechaEdit").show();
        skipStep();
    }

    if(id.substring(0, 3) != "set" && id != "meta" && id != "fechaLimite"){
        $('#closeIcon').show();
        closeIcon.style.left = $(show).width() - 45 + "px";
        closeIcon.style.top = "0px";
        show.appendChild(closeIcon); //alert(show.id);
    }

}

HTML:

<div class="grid_4 proyectoDonaciones" id="meta">
    <img src="images/edit-icon.png" alt="" class="editIcon" style="position:absolute; display:none"  id="editMeta" onclick="show('meta')"/>
    <h1 class="letter border1-pad2">META</h1>
    <!--div class="triangulo_izq_claro"></div-->
    <div> 
        <img src="images/cabezaIguana.png" alt="" width="70" class="editIcon" style="position:relative; left:12px;" onclick="show('meta')" id="cabezaMeta"/>
        <div class="donacionesBarra">
            <div style="margin:0 0 -60px 40%;"><h2 id="porcentajeMeta">0%<h2></div>
            <table width="100%">
                <tr height="45">
                    <td id="metaLeft" bgcolor="#a4c547" width="0%"></td>
                    <td id="metaRight" bgcolor="#FFFFFF" width="100%"></td>
                    <td><img src="images/colaIguana.png" alt="" width="70" style="position:absolute; left:250px;"/></td>
                </tr>
                <tr>
                    <td colspan="2"><span style="float:right;"><h3 style="color:#839e38;">$</h3></span></td>
                </tr>
                <tr>
                    <td colspan="2"><span style="float:right; font-size:15px;">of $<span id="metaText">9000</span> Goal</span></td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div class="grid_4 proyectoDonaciones" style="margin-top:10px; display:none;" id="setMeta">
    <h2 style="margin:10px;">Escriba la meta</h2>
    <div style="margin:10px 25px 10px 10px;"> 
        <input type="text" id="inputMeta" value="9000" style="width:100%;" class="pro_form2" / >
        <br />
        <center>
            <input type="button" value="ACTUALIZAR" class="pro_btn pro_warning" onclick="show('setMeta', document.getElementById('closeIcon'))" />
        </center>
    </div>
</div>

Answer 1

您的按钮正试图显示隐藏它的 div!

您需要定位正确的 div，例如

<div id="firstDiv" style="border:1px solid red;">
    first div here
    <input type="button" value="show second" onclick="$('#secondDiv').show();$('#firstDiv').hide()" />
</div>
<div id="secondDiv" style="display: none; border:1px solid blue;">
    second div here
    <input type="button" value="show first" onclick="$('#firstDiv').show();$('#secondDiv').hide()" />
</div>