</div> CSS .img-container{ text-align: center; visibility:"> </div> CSS .img-container{ text-align: center; visibility:"> </div> CSS .img-container{ text-align: center; visibility:" />

隠された画像の「空白」を取り除く

クリックされた

  • 要素に基づいて、表示または非表示にする画像のリストがあります。これをうまく行うことができましたが、表示されている画像の上下にはまだ空白があります。これが私が現在使っているコードです:

    HTML

    <div class="img-container">
        
        
        
    </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は比較的新しいです。ありがとう。

  • 0
    非表示にするには display = 'block' を、非表示にするには display = 'none' を使用します。
    追加された 著者 thekodester,

    4 答え

    visibility の代わりに display を使用することに加えて、JSをもう少し扱いやすくすることを検討することもできます。クリックした li と同じインデックスの img を表示するだけです。

    例えば:

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    $(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>
    
    • 1
    • 2
    • 3
    <div class="img-container"> </div>
    </div> </div>

    0
    追加された

    jQueryソリューションを探しているなら:

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    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>
    
    • Click a button:
    • <button>Show First Photo</button>
    • <button>Show Second Photo</button>
    • <button>Show Thrid Photo</button>
    • <button>Reset</button>
    <div class="img-container"> </div>
    </div> </div>

    0
    追加された

    cssプロパティの display と値 none および block を使用できます。 displayプロパティは、要素を表示するかどうか/表示方法を指定します。

    可視のimgに置き換えます。

    img1.style.visibility = 'visible';
    

    にとって:

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

    そして目に見えないimgに置き換えます:

    img1.style.visibility = 'hidden';
    

    にとって:

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

    リストに block の代わりにもっと便利な inline-block を使うことができます。

    0
    追加された
    この解決策を検討し始めたところ、うまくいきました。また、 .img-container クラスに display: 'none' を適用していましたが、それを削除してソリューションを実装したところ、すべてうまくいきました。ありがとうございます。
    追加された 著者 Billy,

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

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

    もっと頻繁に、私は通常必要です:

    display = 'none';
    

    または

    display = '';//to have it show
    
    0
    追加された
    @Djack、かっこいいフォーマットに感謝します!
    追加された 著者 Syd,
    JavaScript - 日本のコミュニティ
    JavaScript - 日本のコミュニティ
    2 参加者の

    日本人コミュニティのjavascript