Question

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

用户看到三个框，一个更改颜色
用户点击更改颜色的框
向用户显示一个对象（比如臭鼬）
用户通过在文本输入框中输入＃来对对象进行评级
用户看到所有三个框，下一个框改变颜色

我的ID为E1（代表示例1）的DIV设置为默认显示样式为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和show / hide方法：

甚至，切换：

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

以下是相关教程：

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

为什么不隐藏图像的DIV？

2 个答案: