Html 为什么不是'；图像被隐藏的DIV不存在吗？

我正在尝试创建一个实验，涉及一系列可点击的图像，用户必须在点击对象后对其进行评级。工作流程如下：

#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>

用户看到三个框，其中一个改变颜色

用户单击改变颜色的框

向用户显示一个对象（例如臭鼬）

用户通过在文本输入框中输入#对对象进行评级

用户看到所有三个框，下一个框改变颜色

我将id为E1的DIV（代表示例1）设置为默认显示样式none（最初由CSS设置），但是当我在浏览器中查看页面时，它仍然显示出来。因此，当我应该只看到cover.jpg时，我会看到E1.jpg及其关联的文本输入框

#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事件，或者隐藏或显示其他div）。我只是想解决显示的问题：没有；没有隐瞒任何事情

#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>

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>

#apDiv1{
位置：绝对位置；
宽度：120px；
高度：120px；
z指数：1；
左：656px；
顶部：586px；
文本对齐：居中；
显示：块；
}
#apDiv2{
位置：绝对位置；
宽度：120px；
高度：120px；
z指数：1；
左：543px；
顶部：167px；
文本对齐：居中；
显示：块；
}
#第3章{
位置：绝对位置；
宽度：120px；
高度：120px；
z指数：1；
左：243px；
顶部：167px；
文本对齐：居中；
显示：块；
}
#第C1分部{
显示：块；
z指数：1；
}
#第E1分部{
显示：无；
z指数：1；
}
#E2分部{
显示：无；
}
#E3分部{
显示：无；
}

JavaScript

#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>

<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>

函数divHideShow（divToHideOrShow）
{
var div=document.getElementById（divToHideOrShow）；
如果（div.style.display==“块”）
{
div.style.display=“无”；
}
其他的
{
div.style.display=“块”；
}
}
函数HideDIV（d）
{ 
document.getElementById（d）.style.display=“无”；
}
函数ShowDIV（d）
{ 
document.getElementById（d）.style.display=“block”；
}

身体

#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>

<!-- 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>

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

#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>

甚至，切换：

#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>

以下是相关教程：

#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>

---

您的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>

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

---

哇！哇，我真不敢相信我是个大白痴。我想把课堂上的东西应用到身份证上，这也难怪。哈哈，谢谢！计时一结束，我就接受答案。