jQuery 超链接 - href 值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/720970/
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
jQuery hyperlinks - href value?
提问by Tom
On my website I use jQuery to hook the events of elements, namely hyperlinks. As these hyperlinks only perform actions on the current page, and do not lead anywhere, I have been putting a href attribute of "#" in:
在我的网站上，我使用 jQuery 来挂钩元素的事件，即超链接。由于这些超链接仅在当前页面上执行操作，并且不会引导到任何地方，因此我一直将“#”的 href 属性放入：
<a href="#">My Link</a>
However in some browsers this causes the page to scroll right to top which is obviously undesirable behaviour. I've tried using a blank href value, or not including one, but then the mouse does not change to the hand cursor upon hovering.
然而，在某些浏览器中，这会导致页面向右滚动到顶部，这显然是不受欢迎的行为。我试过使用一个空白的 href 值，或者不包括一个，但是鼠标在悬停时不会变成手形光标。
What should I put in there?
我应该在里面放什么？
回答by Bogdan Constantinescu
$('a').click(function (event)
{
event.preventDefault();
//here you can also do all sort of things
});
Then you can put in every hrefwhatever you want and jQuery will trigger the preventDefault()method and you will not be redirected to that place.
然后你可以输入href任何你想要的东西，jQuery 将触发该preventDefault()方法，你不会被重定向到那个地方。
回答by talentedmrjones
Those "anchors" that exist solely to provide a click event, but do not actually link to other content, should really be buttonelements because that's what they really are.
那些仅用于提供点击事件但实际上并不链接到其他内容的“锚点”实际上应该是按钮元素，因为这就是它们的真正含义。
It can be styled like so:
它可以像这样设计：
<button style="border:none; background:transparent; cursor: pointer;">Click me</button>
And of course click events can be attached to buttons without worry of the browser jumping to the top, and without adding extraneous javascript such as onclick="return false;" or event.preventDefault() .
当然，单击事件可以附加到按钮上，而不必担心浏览器跳到顶部，也无需添加无关的 javascript，例如 onclick="return false;" 或 event.preventDefault() 。
回答by gargantuan
You should really put a real link in there. I don't want to sound like a pedant, but that's a fairly bad habit to get into. JQuery and Ajax should always be the last thing you implement. If you have a link that goes no-where, you're not doing it right.
你真的应该在那里放一个真正的链接。我不想听起来像个学究，但这是一个相当糟糕的习惯。JQuery 和 Ajax 应该始终是您实现的最后一件事。如果您的链接无处可去，则说明您做得不对。
I'm not busting your balls, I mean that with all the best intention.
我不是在破坏你的球，我的意思是出于最好的意图。
回答by bart
Why use a <a href>? I solve it like this:
为什么使用<a href>? 我是这样解决的：
<span class='a'>fake link</span>
<span class='a'>fake link</span>
And style it with:
并使用以下样式对其进行样式设置：
.a {text-decoration:underline; cursor:pointer;}
.a {text-decoration:underline; cursor:pointer;}
You can easily access it with jQuery:
您可以使用 jQuery 轻松访问它：
$(".a").click();
$(".a").click();
回答by roryf
Add return false to the end of your click handler, this prevents the browser default handler occurring which attempts to redirect the page:
将 return false 添加到点击处理程序的末尾，这可以防止浏览器默认处理程序尝试重定向页面：
$('a').click(function() {
// do stuff
return false;
});
回答by djspark
using jquery, you may want to get only to those with a '#'
使用 jquery，您可能只想获取带有“#”的那些
$('a[href=#]').click(function(){return false;});
if you use the newest jquery (1.3.x), there's no need to bind it again when the page changes:
如果你使用最新的jquery（1.3.x），页面变化时不需要再次绑定：
$('a[href=#]').live('click', function(){return false;});
回答by mohsen
you shoud use <a href="javascript:void(0)" ></a>instead of <a href="#" ></a>
你应该使用<a href="javascript:void(0)" ></a>而不是<a href="#" ></a>
回答by Best
Wonder why nobody said it here earlier: to prevent <a href="#">from scrolling document position to the top, simply use <a href="#/">instead. That's mere HTML, no JQuery needed. Using event.preventDefault();is just too much!
想知道为什么没有人早先在这里说：为了防止将<a href="#">文档位置滚动到顶部，只需使用<a href="#/">代替。那只是 HTML，不需要 JQuery。使用event.preventDefault();太多了！
回答by Justin
I know this is old but wow, there's such an easy solution.
我知道这已经过时了，但是哇，有一个如此简单的解决方案。
remove the "href" entirely and just add a class that does the following:
完全删除“href”，只需添加一个执行以下操作的类：
.no-href { cursor:pointer: }
And that's it!
就是这样！
回答by amurrell
I almost had this problemand it was very deceiving. I am providing an answer in case someone winds up in my same position.
我几乎遇到了这个问题，它非常具有欺骗性。我正在提供一个答案，以防有人在我的同一职位上结束。
- I thoughtI had this problem
- But, I was using return false and javascript:void(0);
- Then a distinct difference in problem kept surfacing:
- I realized it's not going ALL the way to the top - and my problem zone was near the bottom of the page so this jump was strange and annoying.
- I realized I was using fadeIn() [jQuery library], which for a short time my content was display:none
- And then my content extended the reach of the page! Causing what looks like a jump!
- Using visibility hidden toggles now..
- 我以为我有这个问题
- 但是，我使用的是 return false 和 javascript:void(0);
- 然后问题的明显差异不断浮出水面：
- 我意识到它并没有一直到顶部 - 我的问题区域靠近页面底部，所以这个跳跃很奇怪而且很烦人。
- 我意识到我正在使用fadeIn() [jQuery 库]，在短时间内我的内容是 display:none
- 然后我的内容扩展了页面的覆盖范围！导致看起来像跳跃！
- 现在使用可见性隐藏切换..
Hope this helps the person stuck with jumps!!
希望这能帮助那些被跳跃卡住的人！！
