我使用 jQuery,我需要让一些锚标记不执行任何操作。
我通常这样写:
<a href="#">link</a>
但是这指的是页面的顶部!
如果您不想让它指向任何东西,那么您可能不应该使用 <a>(锚)标记。
<a>
如果你想让一些东西看起来像一个链接,而不是像一个链接,最好使用适当的元素(如 <span>) ,然后使用 CSS 设计它的样式:
<span>
<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元素更加优雅。
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
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="#!"(或者任何你想要的东西,真的) ,然后使用这个:
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属性,它不会链接到任何东西:
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 函数,这是最好的方法
我在一个 WordPress 网站上遇到了这个问题。下拉菜单中的头部始终具有 href=""属性,而头部插件只允许使用标准的 URL。最简单的解决方案就是在页脚中运行这段代码:
href=""
jQuery('[href=""]').click(function(e){ e.preventDefault(); });
这将防止空白锚做任何事情。
你可以通过
<a style='cursor:pointer' >Link</a>
反应不再支持在锚标记中使用类似 href="javascript:void(0)"的函数,但是这里有一些非常好用的东西。
href="javascript:void(0)"
<a href="#" onClick={() => null} >link</a>
在 HTML5中,只需删除 href属性
<a>Your text</a>