Question

我在底部的这个页面上使用了一些Jquery代码作为标签： http://isintl.com/certifications/tbc1/

但是，当标签位于页面顶部并单击时，页面会跳下来！

我试图实现一个PREVENT DEFAULT，但没有任何作用！

请帮忙！

<script type="text/javascript">
// tabbed content
    // http://www.entheosweb.com/tutorials/css/tabs.asp
    $(".tab_content").hide();
    $(".tab_content:first").show();

  /* if in tab mode */
    $("ul.tabs li").click(function() {

      $(".tab_content").hide();
      var activeTab = $(this).attr("rel"); 
      $("#"+activeTab).fadeIn();        

      $("ul.tabs li").removeClass("active");
      $(this).addClass("active");

      $(".tab_drawer_heading").removeClass("d_active");
      $(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");


    });
    /* if in drawer mode */
    $(".tab_drawer_heading").click(function() {

      $(".tab_content").hide();
      var d_activeTab = $(this).attr("rel"); 
      $("#"+d_activeTab).fadeIn();

      $(".tab_drawer_heading").removeClass("d_active");
      $(this).addClass("d_active");

      $("ul.tabs li").removeClass("active");
      $("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
    });


    /* Extra class "tab_last" 
       to add border to right side
       of last tab */
    $('ul.tabs li').last().addClass("tab_last");



</script>

Answer 1

这是因为页面正在调整自身大小到选项卡的大小。第一个选中的标签比第二个更高。单击选项卡时，它占用的空间较少，第一个选项卡与页面底部之间的距离较小。然后页面底部会捕捉到窗口的底部。

您可以通过使用CSS使标签具有相同的高度来缓解这种情况。这将在某些标签下方添加空白区域。

Answer 2

Jeff Clarke所说的实际上是正确的，为了防止页面跳跃，你可以给你的tab_container一个像这样的最小高度。

.tab_container {
  min-height: 900px;
}

单击JQuery选项卡时出现奇怪的页面跳转

2 个答案: