删除 'white-space' 个隐藏图像

Question

我有一个图像列表，我想 hide/show 基于单击 <li> 元素。我已经能够成功地做到这一点，但是，仍然有白色 space below/above 显示的图像。这是我目前使用的代码：

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() 搭配使用，但似乎无法使其正常工作。我试过搜索这个但找不到任何关于删除隐藏图像所持有的白色 space 的信息。我对 JS/jQuery 比较陌生。谢谢。

Answer 1

当 visibility 设置为 hidden 时，该元素未显示但仍占用页面上的 space。

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

更多时候，我通常需要：

display = 'none';

或

display = ''; // to have it show

Answer 2

您可以使用 css 属性 display 和值 none 和 block。显示属性指定 if/how 显示一个元素。

替换为可见的 img：

img1.style.visibility = 'visible';

为：

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

并替换为不可见的 img：

img1.style.visibility = 'hidden';

为：

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

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

Answer 3

如果寻找 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 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>

删除 'white-space' 个隐藏图像

Removing 'white-space' of hidden images

javascript

css

jquery

jquery-mobile