当点击链接时禁用滚动

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

- GoofyBall

---

你的 <a> 标签中 href 在哪里？ - thecodeparadox

没有超链接。我有点懒。 :/ - GoofyBall

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

- Roko C. Buljan

Answer 2

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

为所有锚点添加return false。

- Chuck Norris

---

这是做事的错误方式，请检查我的答案或Roko的答案。 - pomeh

错误！如果您使用锚点，必须使用href属性而不是onclick！ - David Diez

我没有注意到 href 属性缺失。我认为这并不是错误的方式。 - Chuck Norris

这是旧的 JavaScript 方法。我猜在某些情况下仍然有效？ - James P.

我认为这是有效的。顺便说一下，你可以轻松地使用roXon的答案代替。 - Chuck Norris

Answer 3

这是具有哈希的链接的默认行为。你想要的是防止默认浏览器行为，所以应该使用event.preventDefault方法。

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

- pomeh