为什么DIV图像不被隐藏？

问题描述：

我正在尝试创建一个涉及一系列可点击图片的实验，用户在点击该图片后必须对其进行打分。工作流感：为什么DIV图像不被隐藏？

用户看到三个框，一个改变颜色上改变颜色
用户被示出的对象的框（比如说一个臭鼬）
用户速率对象
用户点击由进入到＃一个文本输入框
用户看到所有三个箱，下一箱变颜色

我有DIV与E1的ID（repre发送示例1）设置默认显示样式为none（最初由CSS设置），但当我在浏览器中查看页面时，它仍然显示。因此，当我只能看到一个cover.jpg时，我会看到E1.jpg及其相关的文本输入框。

编辑：哦一些代码还没有完成（例如JavaScript事件用于记录评估对象的毫秒数，或隐藏或显示其他DIV）。我只想解决显示问题：无;没有隐藏任何东西。

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>

答

你的CSS应该简单地

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

哇。哇，我简直不敢相信我是一个白痴。我试图将类的东西应用到一个ID。难怪。哈哈谢谢！一旦计时器完成，我会接受答案。 – OneBigNewbie 2012-01-13 01:25:47

答

使用jQuery和显示/隐藏方法：

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

甚至，拨动：

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

这里的相关教程：

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

为什么DIV图像不被隐藏？

相关推荐