javascript - HTML/Javascript 剧透脚本在 IE 中不起作用（显示/隐藏）

Question

<div id="z1" onclick="document.getElementById('q1').style.display='';     document.getElementById('z1').style.display='none';" style="border:solid 1px; background-    color: #DDDDDD; width:936px; height:auto; margin-left:0px;margin-right:0px;">
<h2>&nbsp;Pg. 419-423, problems 8-14 even, 20-30 odd, AYP 1-10</h2></div>
<div id="q1" onclick="document.getElementById('q1').style.display='none';     document.getElementById('z1').style.display='';" style="display:none; border:solid 1px;         background-color: #DDDDDD; width:938px; height:auto;margin-left:0px;margin-right:0px;">
<h2>&nbsp;Pg. 419-423, problems 8-14 even, 20-30 odd, AYP 1-10</h2>
</br>
<img src="http://www.rediker.com/reports/samples/Attendance-Period/Homework-Assignment-        form.jpg"></img></div>

上面的脚本是我计划用来创建剧透的。基本上，当用户单击 z1 元素时，它会隐藏自身并显示 q1 元素，反之亦然。它适用于除 IE 之外的所有浏览器。链接 Jquery 将是一个小责任。

Answer 1

我想这就是你要找的。您缺少要添加的内容display: block

改变这个

document.getElementById('z1').style.display='';

到

document.getElementById('z1').style.display='block';

你应该考虑清理你的代码。

HTML：

<div id="z1" onclick="aa()"></div>
<div id="q1" onclick="bb()"> 
    <img src="http://www.rediker.com/reports/samples/Attendance-Period/Homework-Assignment-form.jpg"/>
</div>

JS：

function aa() {
    document.getElementById('q1').style.display = 'block';
    document.getElementById('z1').style.display = 'none';
}

function bb() {
    document.getElementById('q1').style.display = 'none';
    document.getElementById('z1').style.display = 'block';
}

工作 JSfiddle