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

如果您的slider div没有指定尺寸，那么当此行隐藏image_large_* div时它会崩溃：

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

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

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

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

1 个答案: