隠し画像の「空白」を削除する

Question

<li>要素をクリックしたときに表示/非表示を希望する画像の一覧があります。私はこれを正常に行うことができましたが、まだ表示されている画像の下/上に空白があります。私は.toggle()とペアdisplay: hidden CSSプロパティで遊んで試してみました

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

HTML：ここで私は、現在使用しているコードです。それはかなり正常に動作するように見えることはできません。私はこれを検索しようとしましたが、隠された画像が保持している空白を取り除くことができません。 JS/jQueryでは比較的新しいです。ありがとう。

Answer 1

とnoneとblock値。 displayプロパティは、要素が表示されるかどうかを指定します。

img1.style.visibility = 'visible'; 

のために：

することは目に見えるIMGのために置き換える

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

と不可視のimgのために交換してください：

img1.style.visibility = 'hidden'; 

用：

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

リストの代わりにinline-blockの代わりにblockを使用すると便利です。

Answer 2

visibilityがhiddenに設定されている場合、その要素は表示されませんが、まだページ上の領域を占有します。

displayがnoneに設定されている場合、要素は表示されず、ページ上のスペースも占有されません。多くの場合

、私は通常必要があります：あなたはCSSプロパティdisplayを使用することができ

display = 'none'; 

または

display = ''; // to have it show 

Answer 3

jQueryの解決策を探している場合：display代わりのvisibilityを使用することに加えて

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

あなたも扱いが少し楽にあなたのJSをすることを検討できます。あなたはクリックされたものと同じインデックスを持つimgを単に表示することができますli。

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>