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配对的.toggle() css属性，但似乎无法让它正常工作。我试过搜索这个，但找不到任何关于删除隐藏图像所持有的空白区域。对JS / jQuery来说相对较新。感谢。

Answer 1

当([A-Z]{2} +[\d]{3}) +((?: *\-* *\w+)+) +([\(\-\d\)]{9})设置为visibility时，该元素不会显示但仍会占用页面上的空间。

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

更常见的是，我通常需要：

none

或

display = 'none';

Answer 2

您可以使用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 3

如果正在寻找jQuery解决方案：

＆＃13;

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();
} );

＆＃13;

<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>

＆＃13;

Answer 4

除了使用display代替visibility之外，您还可以考虑让JS更容易处理。您只需显示与所点击的img具有相同索引的li即可。

EG：

＆＃13;

$(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();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

删除＆＃39; white-space＆＃39;隐藏的图像

4 个答案: