jQuery 如何使锚标记不引用任何内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/924790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make an anchor tag refer to nothing?
提问by ahmed
I use jQuery, I need to make some anchor tags perform no action.
我使用 jQuery，我需要让一些锚标记不执行任何操作。
I usually write it like this:
我通常是这样写的：
<a href="#">link</a>
However this refers to the top of the page!
然而，这是指页面的顶部！
采纳答案by Tyson
If you don't want to have it point to anything, you probably shouldn't be using the <a>(anchor) tag.
如果你不想让它指向任何东西，你可能不应该使用<a>(anchor) 标签。
If you want something to look like a link but not act like a link, it's best to use the appropriate element (such as <span>) and then style it using CSS:
如果您希望某些内容看起来像链接但又不像链接，最好使用适当的元素（例如<span>），然后使用 CSS 对其进行样式设置：
<span class="fake-link" id="fake-link-1">Am I a link?</span>
.fake-link {
color: blue;
text-decoration: underline;
cursor: pointer;
}
Also, given that you tagged this question "jQuery", I am assuming that you want to attach a click event hander. If so, just do the same thing as above and then use something like the following JavaScript:
此外，鉴于您将此问题标记为“jQuery”，我假设您想要附加一个点击事件处理程序。如果是这样，只需执行与上述相同的操作，然后使用类似于以下 JavaScript 的内容：
$('#fake-link-1').click(function() {
/* put your code here */
});
回答by zaius
There are a few less than perfect solutions:
有一些不太完美的解决方案：
1. Link to a fake anchor
1. 链接到假主播
<a href="#">
Problem: clicking the link jumps back to the top of the page
问题：点击链接跳转回页面顶部
2. Using a tag other than 'a'
2. 使用 'a' 以外的标签
Use a span tag and use the jquery to handle the click
使用 span 标签并使用 jquery 处理点击
Problem: breaks keyboard navigation, have to manually change the hover cursor
问题：中断键盘导航，必须手动更改悬停光标
3. Link to a javascript void function
3. 链接到 javascript void 函数
<a href="javascript:void(0);">
<a href="javascript:;">
Problem: breaks when linking images in IE
问题：在 IE 中链接图像时中断
Solution
解决方案
Since these all have their problems, the solution I've settled on is to link to a fake anchor, and then return false from the onClick method:
由于这些都有他们的问题，我已经确定的解决方案是链接到一个假锚，然后从 onClick 方法返回 false：
<a href="#" onClick="return false;">
Not the most concise of solutions, but it solves all the problems with the above methods.
不是最简洁的解决方案，但它解决了上述方法的所有问题。
回答by Philippe Leybaert
To make it do nothing at all, use this:
要让它什么都不做，请使用以下命令：
<a href="javascript:void(0)"> ... </a>
回答by Oli
The correct way to handle this is to "break" the link with jQuery when you handle the link
处理这个问题的正确方法是在处理链接时用jQuery“断开”链接
HTML
HTML
<a href="#" id="theLink">My Link</a>
JS
JS
$('#theLink').click(function(ev){
// do whatever you want here
ev.preventDefault();
ev.stopPropagation();
});
Those final two calls stop the browser interpreting the click.
最后两个调用会停止浏览器解释点击。
回答by Punit Gajjar
There are so many ways to do it like
有很多方法可以做到
Dont add and hrefattribute
不要添加和href属性
<a name="here"> Test <a>
You can add onclick event instead of href like
您可以添加 onclick 事件而不是 href 之类的
<a name="here" onclick="YourFunction()"> Test <a>
Or you can add void function like this which would be the best way
或者你可以像这样添加 void 函数，这将是最好的方法
<a href="javascript:void(0);">
<a href="javascript:;">
回答by KristoferA
What do you mean by nothing?
你是什么意思？
<a href='about:blank'>blank page</a>
or
或者
<a href='whatever' onclick='return false;'>won't navigate</a>
回答by Rutesh Makhijani
I think you can try
我想你可以试试
<a href="JavaScript:void(0)">link</a>
The only catch I see over here is high level browser security may prompt on executing javascript.
我在这里看到的唯一问题是高级浏览器安全性可能会提示执行 javascript。
Though this is one of the easier way than
虽然这是一种比
<a href="#" onclick="return false;">Link</a>
this should be used sparingly
这应该谨慎使用
Read this article for some pointers https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void
阅读这篇文章以获得一些提示https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void
回答by aross
This answer should be updated to reflect new web standards (HTML5).
应更新此答案以反映新的 Web 标准 (HTML5)。
This:
这个：
<a tabindex="0">This represents a placeholder hyperlink</a>
... is valid HTML5. The tabindex attribute makes it keyboard focusable like normal hyperlinks. You might as well use the spanelement for this as mentioned previously, but I find using the aelement more elegant.
... 是有效的 HTML5。tabindex 属性使它像普通超链接一样可以通过键盘聚焦。span如前所述，您不妨为此使用该元素，但我发现使用该a元素更优雅。
See: https://w3c.github.io/html-reference/a.html
and: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href
请参阅：https: //w3c.github.io/html-reference/a.html
和：https: //html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href
回答by Milan Gajjar
Here are the three ways for <a>tag's hreftag property refer to nothing:
以下是<a>标签的href标签属性不引用的三种方式：
<a href="JavaScript:void(0)"> link </a>
<a href="javascript:;">link</a >
<a href="#" onclick="return false;"> Link </a>
回答by bearfriend
Make sure all your links that you want to stop have href="#!"(or anything you want, really), and then use this:
确保你想要停止的所有链接href="#!"（或任何你想要的，真的），然后使用这个：
jq('body').on('click.stop_link', 'a[href="#!"]',
function(event) {
event.preventDefault();
});
