如何制作无处可去的链接？答案

【问题标题】：How do I make a link that goes nowhere?如何制作无处可去的链接？
【发布时间】：2010-12-22 07:15:36
【问题描述】：

是否可以建立一个什么都不做的链接？

我希望该项目是一个链接，因此我可以在鼠标悬停时更改光标，但我不希望链接实际上去任何地方，因为它实际上会触发在同一页面上显示具有额外功能的 div。

【问题讨论】：

标签： html hyperlink

【解决方案1】：

将添加到浏览器历史记录中：

<a href="#"></a>

不会添加到浏览器历史记录（首选方法）：

<a href="javascript:;"></a>

【讨论】：

即使他们关闭了javascript也可以吗？
是的，它什么也不做。
请注意，如果您设置了 onclick 功能，后者确实会导致问题。
另一个注意事项：href="javascript:;" 不是，也从来不是首选方法。应不惜一切代价避免将 JS 代码放在 HTML 属性中。

【解决方案2】：

相反，您可以使用 <span> 并设置光标样式：

<span id="node42" class="node-link">My Text</span>

并在样式表中指定光标：

.node-link { cursor: pointer; }

这还允许您附加到节点以便稍后执行操作（在此处使用Prototype 显示）：

<script type="text/javascript">
    $('node42').observe('click', function(event) {
      alert('my click handler');
    });
</script>

【讨论】：

@Roger: 使用id 允许元素被唯一标识，在这种情况下对javascript示例非常有用。你有一个很好的光标点。它可能更像是一种基于类的风格。我已经更新了我的答案。谢谢！
这不会导入超链接的样式（如超链接颜色、文本装饰...等）。因此 powers1 的答案更好。
这将不利于可访问性，因为缺少 ARIA 属性或任何可以告诉屏幕阅读器这是一个交互式元素的东西。它甚至无法通过标签导航访问（多次按Tab 键）。

【解决方案3】：

在我看来，最完整的免破解解决方案是：

<a href="" onclick="return false;">do absolutely nothing</a>

【讨论】：

到目前为止，这个解决方案似乎对我来说效果最好，因为我想在 onclick 中使用 JavaScript 函数（我只是在它之后返回 false）：例如<a href="" onclick="myFunction(); return false">my text</a>

【解决方案4】：

只需在元素中添加样式cursor:pointer：

<a id="clickme">Click Me</a>

CSS：

#clickme { cursor: pointer }

或（天堂禁止）在线：

<a style="cursor:pointer">Click Me</a>

【讨论】：

您必须使用 href="#"。点击我会产生问题。
@Umesh，什么问题？唯一的“问题”是悬停样式在 IE6 中不起作用，cursor: pointer 不会自动应用。请解释一下。

【解决方案5】：

这里有两种经典的 JavaScript 方法，它们不会在您的 JavaScript 控制台 中给您错误 和/或 不要不要更改 URL，也不要将其保存到浏览器历史记录中：

<a href="javascript:void(0);">Click on this JavaScript error-free link that won't change your URL nor save it into your browser history</a><hr />
<a href="#void">Maybe a more readable approach, but unfortunately this one changes your URL</a>

【讨论】：

【解决方案6】：

如果您只想要样式，请将 CSS cursor property 设置为指针。

但听起来你想要<a href="javascript:void(do_something())">。

【讨论】：

【解决方案7】：

我一直在寻找更简单的东西，我想我找到了。你想让你的链接不去任何地方吗？省略href。

<a class='irrelevant_for_this_example'>Some text</a>

href="#" 将滚动到页面顶部。

href="javascript:;" 看起来很狡猾。

对于这么简单的事情，似乎不需要 JavaScript 解决方案。

【讨论】：

实际上，我认为 OP 可能正在使用该链接来触发 JavaScript 中的可折叠/可展开框。我可以确认href="javascript:;" 可以做到这一点。删除href 意味着浏览器不会将其视为普通链接，即当您将鼠标悬停在链接上时，鼠标不会变为手指。
话虽如此，href="#void"，或类似的东西，工作，可能会更好