我有以下 HTML 和 JavaScript。三张图片,三个链接。单击一个链接会显示一张图片并隐藏另外两张。
当 CSS 中的 display: none
不存在时,这可以正常工作。但我把 display: none
放在那里是因为我希望图片不 最初出现。现在,当我点击链接时,图片永远不会出现。这是为什么?
HTML
<div id="content">
<div id="left">
<a href="javascript:showImage('img1')">show image1</a>
<a href="javascript:showImage('img2')">show image2</a>
<a href="javascript:showImage('img3')">show image3</a>
</div>
<div id="right">
<img id="img1" src="berlin.jpg" height="200px"/>
<img id="img2" src="london.jpg" height="200px"/>
<img id="img3" src="madrid.jpg" height="200px"/>
</div>
</div>
JavaScript
function showImage(id) {
var images_id = new Array("img1", "img2", "img3");
for (var i = 0; i < images_id.length; i++) {
setImageVisible(images_id[i], false);
}
setImageVisible(id, true);
}
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.display = (visible ? '' : 'none');
}
CSS
#img1, #img2, #img3 {
display: none;
}
最佳答案
当您设置 <strong><em>elem</em></strong>.style.<strong><em>property</em></strong>
时, 你只影响 style
属性。通过将其设置为 ""
,您正在从该属性中删除它并让样式表与其 display:none
一起生效.
尝试将其设置为 block
相反。
关于javascript - 显示: none is removed 不显示图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15318957/