Question

我有以下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;
}

Answer 1

设置elem.style.property时，您只会影响style属性。通过将其设置为""，您将从该属性中删除它，并让样式表与其display:none一起生效。

尝试将其设置为block。

显示时不显示图片：无删除

1 个答案: