删除隐藏图像的“空白”

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。

Answer 2

如果寻找 jQuery 解决方案：

var $img1 = $( "#img1" ),
    $img2 = $( "#img2" ),
    $img3 = $( "#img3" );

$( "li:nth-child(2)" ).on( "click", function() {
  $img1.show();
  $img2.hide();
  $img3.hide();
} );
$( "li:nth-child(3)" ).on( "click", function() {
  $img1.hide();
  $img2.show();
  $img3.hide();
} );
$( "li:nth-child(4)" ).on( "click", function() {
  $img1.hide();
  $img2.hide();
  $img3.show();
} );
$( "li:last-child" ).on( "click", function() {
  $img1.show();
  $img2.show();
  $img3.show();
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul style="list-style: none;">
<li>Click a button:</li>
<li><button>Show First Photo</button></li>
<li><button>Show Second Photo</button></li>
<li><button>Show Thrid Photo</button></li>
<li><button>Reset</button></li>
</ul>

<div class="img-container">
  <img id="img1" width="300" height="300" src="https://blognumbers.files.wordpress.com/2010/09/1.jpg" />
  <img id="img2" width="300" height="300" src="https://blognumbers.files.wordpress.com/2010/09/2.jpg" />
  <img id="img3" width="300" height="300" src="https://blognumbers.files.wordpress.com/2010/09/3.jpg" />
</div>

Answer 3

当visibility 设置为hidden 时，该元素不会显示，但仍会占用页面空间。

当display 设置为none 时，该元素既不显示也不占用页面上的任何空间。

更多时候，我通常需要：

display = 'none';

或

display = ''; // to have it show

Answer 4

除了使用display 而不是visibility，您还可以考虑让您的JS 更易于处理。您可以简单地显示与单击的li 具有相同索引的img。

EG：

$(function() {
  $(".img-controller li").on("click", function() {
    var i = $(this).index();
    $(".img-container img").hide();
    $(".img-container img:eq(" + i + ")").show();
  });
  $(".img-container img").not(":first").hide();
});

.img-controller {
  list-style-type: none;
  padding: 0;
}
.img-controller li {
  display: inline-block;
  background: #eee;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="img-controller">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<div class="img-container">
  <img src="https://placekitten.com/50/50" />
  <img src="https://placekitten.com/50/40" />
  <img src="https://placekitten.com/50/30" />
</div>