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();
});

单击链接时禁用滚动

3 个答案: