单击拇指图像时，页面会跳到顶部

Question

我有图像滑块，

<div class="slider">
  <div id="image_large_1">
      <img src="../1.png" alt="">   
  </div>
  <div id="image_large_2">
      <img src="../2.png" alt="">   
  </div>
</div>
<!-- Slider close,thumb start -->
<div class="thumbs_div">
  <div id="thumb_1">
     <img src="../1_t.png" alt="" id="thumb_1">   
  </div>
  <div id="thumb_2">
     <img src="../2_t.png" alt="" id="thumb_2">   
  </div>
</div>

当用户点击拇指图像时，其相应的大尺寸图像将显示在滑块div中。一切都很好，但当我点击拇指图像时，页面会跳到顶部，可能是什么问题？以下是jQuery代码。

$("div[id^=image_large_]:gt(0)").hide();
$("div.thumb_div img").click(function(){
       div_id = $(this).attr('id').substring('thumb_'.length);
       $("div[id^=image_large_]").hide();
       $("div#image_large_"+div_id).fadeIn('slow');
    });

Answer 1

如果您的sliderdiv没有指定的维度，那么当image_large_*div被以下行隐藏时，它会折叠：

 $("div[id^=image_large_]").hide();

结果是内容向下移动，当.hide()完成时页面将向上跳。

尝试为大型图像容器div提供与其包含的图像相同的尺寸。