javascript - 删除隐藏图像的 'white-space'

Question

我有一个图像列表，我想根据这些图像隐藏/显示 <li>元素被点击。我已经能够成功地做到这一点，但是，显示的图像下方/上方仍然存在空白。这是我目前使用的代码:

HTML

<div class="img-container">
    <img id="img1" src="img/image1.jpg" />
    <img id="img2" src="img/image2.jpg" />
    <img id="img3" src="img/image3.jpg" />
</div>

CSS

.img-container{
    text-align: center;
    visibility: hidden;
    margin-top: 20px;
}

JS

var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var img3 = document.getElementById('img3');

("li:nth-child(2)").on('click', function() {
    img1.style.visibility = 'visible';
    img2.style.visibility = 'hidden';
    img3.style.visibility = 'hidden';
});
("li:nth-child(3)").on('click', function(){
    img2.style.visibility = 'visible';
    img1.style.visibility = 'hidden';
    img3.style.visibility = 'hidden';
});
("li:last-child").on('click', function() {
    img3.style.visibility = 'visible';
    img2.style.visibility = 'hidden';
    img1.style.visibility = 'hidden';
});

我试过玩弄 display: hidden css 属性与 .toggle() 配对但似乎无法让它正常工作。我试过搜索这个但找不到任何关于删除隐藏图像所持有的空白的信息。我对 JS/jQuery 比较陌生。谢谢。

Answer 1

您可以使用 css 属性 display 和值 none 和 block。display 属性指定元素是否/如何显示。

替换为可见的 img:

img1.style.visibility = 'visible';

对于:

$("#img1").css("display", "block");

并替换为不可见的 img:

img1.style.visibility = 'hidden';

对于:

$("#img1").css("display", "none");

可以使用更有用的 inline-block 而不是列表的 block 。