Question

我有一个包含一些问题和答案的页面，默认情况下答案会被折叠。当他们点击问题时，我展开隐藏的答案-div。问题是，当我单击这些问题时，窗口会跳到屏幕顶部。这不是一个大问题，但我觉得很烦人，因为我不得不再次向下滚动这个问题。

链接看起来像这样：

<a href="#" id="myID">Myquestion</a>

我已经使用jQuery和.click作为事件监听器。

有没有简单的方法可以避免这种情况，或者我是否必须使用.scroll并找到问题的坐标？我宁愿避免这种情况。

编辑：我知道我可以使用锚点来做这件事，但我想避免任何跳跃的屏幕。

Answer 1

您需要将preventDefault()添加到点击处理程序中。这将停止浏览器执行它自己的链接处理程序，并且只运行您指定的代码。

示例：

$("#myID").click(function(e) {
    e.preventDefault();
    // Do your stuff
});

Answer 2

不要将A标签用于与导航无关的任务。它不是语义标记，也不会优雅地降级。改为使用按钮。

Answer 3

你可以很简单地做到：只需在!：

的末尾添加href即可

<a href="#!" id="myID">Myquestion</a>

替代jQuery的方式是：

$("#myID").click(function(e) {
    e.preventDefault(); // one way 
    return false; // second way prevent default click action from happening
});

Answer 4

$("#myID").click(function(e) {
    if(e.preventDefault)
        e.preventDefault();
    else
        e.stop();
});

仅

e.preventDefault()在旧版IE中无效。

Answer 5

实际上，最简单的方法是从锚标记中删除href属性。从HTML5开始，锚标签不需要包含href属性是语义的。

所以

<a id="myID">Myquestion</a>

而不是

<a href="#" id="myID">Myquestion</a>

适用于IE8 +，Chrome和Firefox。请注意：链接css样式不适用于不包含href属性的锚标记。

如果您需要href属性和/或IE7兼容性，那么

$("#myID").click(function(e) {
if(e.preventDefault)
    e.preventDefault();
else
    e.stop();
});

可能是最好的方式。

Answer 6

$('a').click( function() {
  if ($(this).attr("href") == window.location.hash) {
    event.preventDefault()
  }
});

Answer 7

您正在寻找event.preventDefault（请参阅jQuery API）。

$(...).click(function(e) {
  e.preventDefault();
  // your code
});

Answer 8

在你的职能范围内：

And I've used jQuery and .click as event-listener.

看起来像：

$("#myID").click(function(){});

将此更改为（不要忘记function(e)内的参数：

$("#myID").click(function(e){
    e.preventDefault();
});

Answer 9

滚动回答内容的示例：

$("#question_title").click(function(){
  var $answer=$("#answer");
  $answer.slideDown();
  $.scrollTo( $answer, 800 );
  return false;
});

我使用的是jQuery scrollTo插件。

Answer 10

$('body').on('click', '[href^=#]', function (e) { e.preventDefault() });

如果选择器ex ..＆＃34; body＆＃34;在初始渲染期间是否存在然后使用任何选择器.. id ...来指向通用的jQuery（从1.8.2开始）迭代。＆＃34; On处理程序调用一个名为＆＃34; bind＆＃34;的方法。用于DOM的新增内容＆＃34; ,.使用＆＃34; [href ^ =＃]将选择部分标记中的任何href，但您可以用任何内容替换部分，或者将部分替换为click事件。这种技术非常适合动态创建DOM的内容

Answer 11

如果在“＃”中添加“\”，则会阻止它出现在顶部。

<a href="#\" id="myID">Myquestion</a>

Answer 12

<强> HTML：

<a id="like-post" href="#\">like</a>

<强> JavaScript的：

$('body').delegate('#like-post','click',function(e) {
     e.preventDefault();
     .....
});

单击＃-links时，避免窗口跳转到顶部

12 个答案: