单击#链接时,避免窗口跳至顶部

2021/01/31 05:21 · jquery ·  · 0评论

我的页面上有一些问题和答案,答案默认为折叠。当他们单击问题时,我将展开隐藏的answer-div。问题是,当我单击这些问题时,窗口跳到屏幕顶部。这不是一个大问题,但是我觉得很烦,因为我必须再次向下滚动到该问题。

链接看起来像这样:

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

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

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

编辑:我知道我可以使用锚来执行此操作,但我想避免屏幕上的任何跳动。

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

例:

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

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

您可以非常简单地完成此操作:只需!在您的末尾添加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
});
$("#myID").click(function(e) {
    if(e.preventDefault)
        e.preventDefault();
    else
        e.stop();
});

e.preventDefault()仅在旧版本的IE中不起作用。

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

所以

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

代替

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

这适用于IE8 +,Chrome和Firefox。注意::link css样式将不适用于不包含href属性的锚标记。

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

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

可能是最好的方法。

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

您正在寻找event.preventDefault(请参阅jQuery API)。

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

滚动显示内容的示例:

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

我使用了jQuery scrollTo插件。

内部功能:

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

看起来像:

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

更改为(不要忘记里面的参数function(e)

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

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

如果在初始渲染期间存在选择器ex ..“ body”,则使用any选择器.. id ...定位一般对象以使jQuery(自1.8.2起)进行迭代。“在处理程序上调用一种称为“绑定”的方法,该方法用于将新添加的内容添加到DOM”。使用“ [href ^ =#]将选择section标记中的任何href,但是您可以用任何内容或不使用任何内容替换section,它将取消事件应用于click事件。此技术非常适合于动态创建DOM内容

如果在“#”上添加“ \”,将阻止其到达顶部。

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

HTML:

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

JavaScript:

$('body').delegate('#like-post','click',function(e) {
     e.preventDefault();
     .....
});
本文地址:http://jquery.askforanswer.com/danjilianjieshibimianchuangkoutiaozhidingbu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!