イメージが隠されているDIVはなぜですか？

Question

私は、クリックした後にオブジェクトを評価する必要がある一連のクリック可能な画像を含む実験を作成しようとしています。ワークフロービーイング：

1. ユーザーは、1つのカラー
2. ユーザーがオブジェクト（たとえばスカンク）
3. ユーザー率オブジェクトに示されている変更するボックスの色
4. ユーザーのクリックを変更し、3つのボックスを見てテキスト入力ボックスに＃に入力することにより、
5. ユーザーは、すべての3つのボックスを見て、次のボックスには、カラー

を変更し、私はE1（repreのidを持つDIVを持っています例1を送信していますが、デフォルトの表示スタイルはnone（CSSによって最初に設定されます）に設定されていますが、ブラウザのページを見ると表示されます。その結果、cover.jpgしか見えないときは、関連するテキスト入力ボックスと共にE1.jpgが表示されます。

編集：コードの一部がまだ完了していません（オブジェクトの評価やその他のDIVの表示にかかるミリ秒を記録するJavaScriptイベントなど）。私はdisplay：noneの問題を解決したかっただけです。何も隠さない。

CSS

#apDiv1 { 
    position:absolute; 
    width:120px; 
    height:120px; 
    z-index:1; 
    left: 656px; 
    top: 586px; 
    text-align: center; 
    display: block; 
} 

#apDiv2 { 
    position:absolute; 
    width:120px; 
    height:120px; 
    z-index:1; 
    left: 543px; 
    top: 167px; 
    text-align: center; 
    display: block; 
} 

#apDiv3 { 
    position:absolute; 
    width:120px; 
    height:120px; 
    z-index:1; 
    left: 243px; 
    top: 167px; 
    text-align: center; 
    display: block; 
} 

#div.C1 { 
    display: block; 
    z-index: 1; 
} 

#div.E1 { 
    display: none; 
    z-index: 1; 
} 

#div.E2 { 
    display: none; 
} 

#div.E3 { 
    display: none; 
} 

</style> 

はJavaScript

<script> 
    function divHideShow(divToHideOrShow) 
    { 
     var div = document.getElementById(divToHideOrShow); 

     if (div.style.display == "block") 
     { 
      div.style.display = "none"; 
     } 
     else 
     { 
      div.style.display = "block"; 
     } 

    } 
    function HideDIV(d) 
    { 
     document.getElementById(d).style.display = "none"; 
    } 
    function ShowDIV(d) 
    { 
     document.getElementById(d).style.display = "block"; 
    } 
</script> 

ボディ

<!-- Creates the background for the two screens --> 
<div id="ForDualScreen"> 
    <img src="Images/Example/House.jpg" width="1280" height="1000" border="0" style="float:left;" /> 
    <img src="Images/Black.jpg" width="1280" height="1000" border="0" style="float:right;"/> 
</div> 

<a href="javascript:divHideShow('apDiv1');divHideShow('apDiv2');">Show/Hide apDivs on click</a> 


    <div id="apDiv1"> 

      <div id="C1"> 
      <img src="Images/Example/Cover.jpg" onclick="ShowDIV('E1');HideDIV('C1');" /> 
      </div> 
      <div id="E1"> 
       <img src="Images/Example/E1.jpg" /> 
       <br /> 
       <input name="E1Rating" type="text" size="5" maxlength="1" oninput="Javascript_RTshowCover" /> 
      </div> 
    </div>  

     <div id="apDiv2"> 
      <img src="Images/Example/Cover.jpg" onclick="Javascript_showDivw/Image&Rating" /> 
      <div id="E2"> 
       <img src="Images/Example/E2.jpg"/> 
       <br /> 
       <input name="E2Rating" type="text" size="5" maxlength="1" oninput="Javascript_showCover" /> 
      </div> 
     </div> 

     <div id="apDiv3"> 
      <img src="Images/Example/Cover.jpg" onclick="Javascript_showDivw/Image&Rating" /> 
      <div id="E3"> 
       <img src="Images/Example/E3.jpg"/> 
       <br /> 
       <input name="E3Rating" type="text" size="5" maxlength="1" oninput="Javascript_RTMovetoInstruction" /> 
      </div> 
     </div> 

Answer 1

あなたのCSSは、単に

#E1 { 
    display: none; 
    z-index: 1; 
} 

Answer 2

使用jQueryと表示/非表示方法：

• ​​
• http://api.jquery.com/show/

あるいは、トグル：

• http://api.jquery.com/toggle/

はここに関連するチュートリアルです：

• http://docs.jquery.com/Tutorials:Basic_Show_and_Hide