0 
<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 をリンクすることは、小さな負担になります。

4

1 に答える 1

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

于 2013-07-22T18:40:21.753 に答える