为什么不隐藏图像的DIV？
为什么不隐藏图像的DIV？
提问于 2012-01-13 01:16:15
我正在尝试创建一个实验，其中涉及一系列可点击的图像，用户必须在点击对象后对其进行评级。工作流程如下：
- 用户看到这三个框，一个更改颜色
- 用户单击更改颜色
- 用户的框显示一个对象(比如臭鼬)
- 用户通过在文本输入框
- 用户查看所有三个框来对对象进行评级，下一个框将更改颜色
H 210g 211
我已经设置了id为E1 (代表示例1)的DIV，默认显示样式为none (最初由CSS设置)，但是当我在浏览器中查看页面时，它仍然会显示出来。因此，当我只看到一个cover.jpg时，我会看到E1.jpg及其相关的文本输入框。
编辑:哦，有些代码还没有完成(例如，JavaScript事件，用于记录用于对对象进行评级的毫秒，或者隐藏或显示其他DIVs)。我只想解决展示的问题:没有，没有隐藏任何东西。
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>Body
<!-- 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>回答 2
Stack Overflow用户
回答已采纳
发布于 2012-01-13 01:21:43
您的CSS应该简单地
#E1 {
display: none;
z-index: 1;
}Stack Overflow用户
发布于 2012-01-13 01:21:33
使用jQuery和显示/隐藏方法：
- http://api.jquery.com/hide/
- http://api.jquery.com/show/
甚至，切换：
- http://api.jquery.com/toggle/
以下是相关教程：
- http://docs.jquery.com/Tutorials:Basic_Show_and_Hide
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8844715
复制相关文章
相似问题
腾讯云开发者
