[英]e.preventDefault() to prevent anchor jumping to the ID not working on anonymous function
I have the following jQuery/JS that triggers some stuffs when an element is clicked: 我有以下jQuery / JS,当单击一个元素时会触发一些操作:
$(tabs).click(function(e) {
tabs.removeClass('active');
$(this).addClass('active');
$(tabIDs).removeClass('js_tab_area_show');
$($(this).attr('href')).addClass('js_tab_area_show');
e.preventDefault();
alert('worked');
});
tabs
here has been initialised before the function and has selected the elements I want to target. tabs
已在功能之前进行了初始化,并选择了我要定位的元素。 All the things above are already working. 以上所有内容均已正常运行。 However, I now want to disable the anchor element (ie
tabs
in this case) from scrolling to the element with the ID that is contained within the href
properties of my anchors. 但是,我现在想禁止锚元素(在这种情况下为
tabs
)滚动到具有我的锚的href
属性中包含的ID的元素。 I tried looking around and many suggested preventDefault()
to prevent scrolling. 我尝试环顾四周,并提出了许多建议的
preventDefault()
以防止滚动。 However, it did not work for me. 但是,它对我不起作用。 The only difference I mostly see is they have a named function dedicated for handling click events that is called from within the click function.
我最常看到的唯一区别是,它们具有一个专门用于处理单击事件的命名函数,该命名事件是在click函数中调用的。 Mine on the other hand did the above.
另一方面,我的做到了。 The
alert('worked')
did fire indicating the code executed until the end. alert('worked')
确实触发,指示执行的代码直到结束。 What did I do wrong here? 我在这里做错了什么?
href
Modification href
修改 Instead of over complicating your JavaScript/jQuery or CSS do the following. 请执行以下操作,而不是使JavaScript / jQuery或CSS过于复杂。
<a href="#/">I DON't JUMP</a>
☝ Just add a forward slash: /
☝只需添加一个正斜杠:
/
If you have a ton of links and no server-side utilities available to you see Demo 2 . 如果您有大量链接,但没有可用的服务器端实用程序,请参阅演示2 。 It has a simple JavaScript link collector.
它具有一个简单的JavaScript链接收集器。
h1, h2 { text-align: center } h2 { font-size: 64px } a { display: inline-block; height: 30px; font-size: 24px; width: 40%; margin: 400px 0; } a:first-of-type { color: red; text-align: right; } a:last-of-type { color: blue; text-align: left; }
<main> <h1>Scroll Down</h1> <h2>⇩</h2> <a href="#">Click me.<br>I JUMP.</a> <a href="#/">Click me.<br>I DO NOT JUMP.</a> </main>
Array.from(document.querySelectorAll('a')).forEach(lnx => { if (lnx.getAttribute('href') === '#') lnx.setAttribute('href', "#/"); });
h1, h2 { text-align: center } h2 { font-size: 64px } main { margin: 400px auto; } a:nth-of-type(odd) { background: #000; color: #fff; } a:nth-of-type(even) { color: #000; }
<h1>Scroll Down</h1> <h2>⇩</h2> <main> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> <a href='#'>WE DON'T JUMP</a> </main>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.