如何使锚标记不涉及任何东西?

我使用 jQuery,我需要让一些锚标记不执行任何操作。

我通常这样写:

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

但是这指的是页面的顶部!

238551 次浏览

如果您不想让它指向任何东西,那么您可能不应该使用 <a>(锚)标记。

如果你想让一些东西看起来像一个链接,而不是像一个链接,最好使用适当的元素(如 <span>) ,然后使用 CSS 设计它的样式:

<span class="fake-link" id="fake-link-1">Am I a link?</span>


.fake-link {
color: blue;
text-decoration: underline;
cursor: pointer;
}

另外,考虑到您标记了这个问题“ jQuery”,我假设您希望附加一个 click 事件处理程序。如果是这样的话,就像上面那样做,然后使用下面的 JavaScript 代码:

$('#fake-link-1').click(function() {
/* put your code here */
});

你说什么都没有是什么意思?

<a href='about:blank'>blank page</a>

或者

<a href='whatever' onclick='return false;'>won't navigate</a>

处理这个问题的正确方法是在处理链接时使用 jQuery“中断”链接

超文本标示语言

<a href="#" id="theLink">My Link</a>

JS

$('#theLink').click(function(ev){
// do whatever you want here


ev.preventDefault();
ev.stopPropagation();
});

最后两通电话让浏览器无法解读点击信息。

要让它什么都不做,用这个:

<a href="javascript:void(0)"> ... </a>

我觉得你可以试试

<a href="JavaScript:void(0)">link</a>

我在这里看到的唯一一个问题是,在执行 javascript 时,高级别的浏览器安全性可能会提示。

虽然这是最简单的方法之一

<a href="#" onclick="return false;">Link</a>

这个应该少用

阅读本文以了解一些指针 https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void

有一些不那么完美的解决方案:

1. 链接到一个假的锚

<a href="#">

问题: 点击链接会跳回页面顶部

2. 使用“ a”以外的标签

使用 span 标记并使用 jquery 处理单击

问题: 中断键盘导航,必须手动更改悬停光标

3. 链接到一个 javascript void 函数

<a href="javascript:void(0);">
<a href="javascript:;">

问题: 在 IE 中链接图像时中断

解决方案

由于这些都有自己的问题,我决定的解决方案是链接到一个假锚,然后从 onClick 方法返回 false:

<a href="#" onClick="return false;">

不是最简洁的解决方案,但它解决了上述方法的所有问题。

我知道这是个老问题了,但我还是想补充一下我的看法:

这取决于链接要做什么,但通常,我会把链接指向一个可能正在显示/做同样事情的 URL,例如,如果你正在弹出一个小的 about 框:

<a id="about" href="/about">About</a>

然后是 jQuery

$('#about').click(function(e) {
$('#aboutbox').show();
e.preventDefault();
});

这样,非常老式浏览器(或禁用 JavaScript 的浏览器)仍然可以导航到一个单独的 about 页面,但更重要的是,Google 也将采用这种方法并抓取 about 页面的内容。

这个答案应该更新以反映新的网络标准(HTML5)。

这个:

<a tabindex="0">This represents a placeholder hyperlink</a>

是有效的 HTML5。Tabindex 属性使其像普通超链接一样可以用键盘对焦。您也可以像前面提到的那样为此使用 span元素,但是我发现使用 a元素更加优雅。

见: https://w3c.github.io/html-reference/a.html
以及: < a href = “ https://html.spec.whatwg.org/multipage/links.html # attr-hyperlink-href”rel = “ nofollow norefrer”> https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href

唯一对我有效的方法就是综合以上几点:

首先是 ul中的 li

<li><a onclick="LoadTab2_1()" href="JavaScript:void(0)">All Assigned</a></li>

然后在 LoadTab2 _ 1中手动切换选项卡 div。

$("#tabs-2-1").hide();
$("#tabs-2-2").show();

这是因为断开连接的同时也断开了选项卡中的操作。

当主选项卡发生更改时,您还需要手动执行选项卡样式。

$("#secTab1").addClass("ui-tabs-active").addClass("ui-state-active").addClass("ui-state-hover").addClass("ui-state-focus");
$("#secTab1 a").css("color", "#ffffff");

确保你想要停止的所有链接都有 href="#!"(或者任何你想要的东西,真的) ,然后使用这个:

jq('body').on('click.stop_link', 'a[href="#!"]',
function(event) {
event.preventDefault();
});
<a href="#" onclick="SomeFunction()"  class="SomeClass">sth.</a>

这是我的锚标记。所以在 onClick = “”事件上返回 false 在这里没有用。 我只是删除了 href = “ #”属性,它就像下面一样对我有效

<a onclick="SomeFunction()"  class="SomeClass">sth.</a>

我需要添加这个 CSS。

.SomeClass
{
cursor: pointer;
}

您可以有一个没有 href属性的 HTML 锚(a标记)。不要使用 href属性,它不会链接到任何东西:

<a>link</a>

我知道这被标记为一个 jQuery 问题,但是你也可以用 AngularJS 来回答这个问题。

在您的元素中,添加 ng-click 指令并使用 $event 变量,它是 click 事件... 防止其默认行为:

<a href="#" ng-click="$event.preventDefault()">

您甚至可以将 $event 变量传递给函数:

<a href="#" ng-click="doSomething($event)">

在这个函数中,您可以对 click 事件做任何您想做的事情。

以下是 <a>标记的 href标记属性不涉及任何内容的三种方式:

<a href="JavaScript:void(0)"> link </a>


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


<a href="#" onclick="return false;"> Link </a>

有很多种方法可以这样做

不要添加和 href属性

<a name="here"> Test <a>

您可以添加 onclick 事件,而不是像

<a name="here" onclick="YourFunction()"> Test <a>

或者你可以像这样添加 void 函数,这是最好的方法

<a href="javascript:void(0);">
<a href="javascript:;">

我在一个 WordPress 网站上遇到了这个问题。下拉菜单中的头部始终具有 href=""属性,而头部插件只允许使用标准的 URL。最简单的解决方案就是在页脚中运行这段代码:

jQuery('[href=""]').click(function(e){
e.preventDefault();
});

这将防止空白锚做任何事情。

你可以通过

<a style='cursor:pointer' >Link</a>

反应不再支持在锚标记中使用类似 href="javascript:void(0)"的函数,但是这里有一些非常好用的东西。

<a href="#" onClick={() => null} >link</a>

在 HTML5中,只需删除 href属性

<a>Your text</a>