jquery - 单击缩略图时页面跳到顶部

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 提供与它们包含的图像相同的尺寸。