jquery - 单击链接时禁用滚动

Question

我有以下 HTML 标记，它只是三个选项卡，单击它们时，会在页面上的 div 中显示预加载的文本，

    <a class="page" id="tab1">This is tab!</a> 
    <a class="page" id="tab2">This is tab 2!</a> 
    <a class="page" id="tab3">This is tab3!</a> 

此 jQuery 仅在单击其中一个选项卡时隐藏或显示文本，

$(document).ready(function() { 
   $(".page").hide(); 
   $("#tab1").show(); 
}); 
$(".page").click(function() { 
   var id = $(this).attr("href"); 
   $(".page").hide();
   $(id).show(); 
});

但是，如果在我单击其中一个选项卡时出现页面溢出(即页面可滚动)，页面会自动滚动以将 div 在视口(viewport)中居中。我如何防止这种情况发生？

Answer 1

要防止页面在点击时滚动(跟随 anchor 哈希)使用:Event.preventDefault()

$(".page").click(function( evt ) {

   evt.preventDefault();       // prevents browser's default anchor behavior

   // Other code here....
   $(".page").hide();            // HIDE ALL     .page
   $("."+ this.id ).show();      // SHOW RELATED .(id)
});