设置位置，如果不可见的图片不存在

Set location as if invisible pictures don't exist

本文关键字：不存在 位置 如果不 设置      更新时间：2023-09-26

我有以下HTML和JavaScript。有三张图片和三个链接。点击其中一个链接显示一张图片，隐藏另外两张。

这工作。但是，我希望当显示一张图片时，它会显示为其他两张图片不存在，而不是被推到页面的某个地方。这可能吗?

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.visibility = (visible ? 'visible' : 'hidden');
}

而不是:

img.style.visibility = (visible ? 'visible' : 'hidden');
使用

: 

img.style.display = (visible ? '' : 'none');
相关文章：