html - 为什么没有隐藏图像的 DIV？

Question

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

1. 用户看到三个框，一个改变颜色
2. 用户点击改变颜色的框
3. 向用户显示一个对象(比如臭鼬)
4. 用户通过在文本输入框中输入 # 来对对象进行评分
5. 用户看到所有三个框，下一个框改变颜色

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

编辑:哦，有些代码还没有完成(例如，用于记录对对象进行评级所花费的毫秒数的 JavaScript 事件，或者隐藏或显示其他 DIV)。我只是想解决 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;
}