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 在视口中居中。如何防止这种情况发生？

Answer 1

为了防止页面滚动点击（跟随锚散列）使用：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)
});

Answer 2

 <a href="#" class="page" id="tab1" onclick="return false;">This is tab!</a> 

添加return false到所有锚点。

Answer 3

这是带有散列的链接的默认行为。您想要的是防止默认浏览器行为，因此您应该使用该event.preventDefault方法

$(".page").click(function( event ) { 
   var $el = $(this), id = $el.attr( "href" ); 
   $(".page").hide();
   $el.show(); 
   event.preventDefault();
});