我怎样才能创build一个空的HTML锚,使页面不“跳”,当我点击它?
我正在处理一些JQuery来隐藏/显示一些内容,当我点击一个链接。 我可以创build类似于:
<a href="#" onclick="jquery_stuff" />
但是,如果我在页面上向下滚动时单击该链接,则会跳回到页面的顶部。
如果我做这样的事情:
<a href="" onclick="jquery_stuff" />
该页面将重新加载,从而消除了javascript所做的所有更改的页面。
像这样的东西:
<a onclick="jquery_stuff" />
会给我想要的效果,但它不再显示为一个链接。 有没有什么方法来指定一个空锚点,所以我可以分配一个javascript处理程序的onclick
事件,而不改变页面上的任何东西或移动滚动条?
把一个“返回假”; 在第二个选项:
<a href="" onclick="jquery_stuff; return false;" />
你需要return false;
之后的jquery_stuff
:
<a href="no-javascript.html" onclick="jquery_stuff(); return false;" />
这将取消默认的操作。
你可以简单的如下所示:
<a href="javascript:;" onclick="jquery_stuff">
jQuery有一个内置的函数preventDefault
,可以在这里find: http : //api.jquery.com/event.preventDefault/
这是他们的例子:
<script> $("a").click(function(event) { event.preventDefault(); }); </script>
你也可以build立这样的链接:
<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>
检查眼睑的评论(使用button,而不是锚点)。 即将发布相同的build议。 不链接到资源并仅执行脚本的锚点应作为button来实现。
停止将事件处理程序放入HTML中,并停止使用不能用于锚定语义目的的锚标记。 使用一个button,并在您的Javascript添加点击处理程序。 例如:HTML
<button id="jquery_stuff">Label</button>
和JavaScript$('#jquery_stuff').click(jquery_stuff);
。 您可以使用CSS将button设置为链接样式,方法是移除填充,边框,边距和背景色,然后添加链接样式(例如,颜色和文本修饰)。 – 眼皮10月19 '10在17:40
<a href="javascript:;" onclick="jquery">link</a>
如果你希望它不会popuphtmlvalidation器中的错误,那么href
需要一些东西。 javascript:;
是一个好的地方持有人。
如果你真的想使用#
:
<a href="#me" name="me" onclick="jquery">link</a>
要小心return false;
,它会暂停你正在做的任何事情的默认行为。
此外,如果你的js就像一个提交,你可能会遇到问题在Internet Explorer中。
<a href="javascript:// some helpful comment " onclick="jquery_stuff" />
当我需要完成像这样的事情时,我通常使用<span>
并将其设置为链接。
<a href="#" class="falseLinks">Link1</a> <a href="#" class="falseLinks">Link2</a>
等等..
JQUERY:
$(function() { $("a.falseLinks").click(function() { // ...other stuff you want to do when links is clicked // This is the same as putting onclick="return false;" in HTML return false; }) });
他的performance方式让他感到有些d but,但是他是对的。 这是最干净的方式。 为什么使用jQuery如果你要回到香草JavaScript的东西jQuery更容易和更清洁?
通常我做:
<a style="cursor:pointer;" onclick="whatever();">Whatever</a>
这个怎么样:
<a href="#nogo" onclick="foo();">some text</a>