创建一个什么都不做的HTML链接（几乎没有）

Question

我想要一个什么都不做的链接。我不想要这个：

<a href="#">

因为网址变为something.com/whatever/#。

我想要链接的唯一原因是用户可以看到他们可以点击文本。 JavaScript被用来执行一些操作，所以我不需要链接去任何地方，但我需要它看起来像一个链接！

我可以使用一些数据属性并告诉我CSS如果它们具有此属性，则使元素看起来像链接，但它似乎有点矫枉过正。

Answer 1

以下内容将阻止您的href运行

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

如果您使用的是jQuery，则可以使用event.preventDefault()

Answer 2

试试这个：

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

Answer 3

在HTML5中，这非常简单。只需省略href属性。

＆＃13;

＆＃13;

<a>Do Nothing</a>

＆＃13;

＆＃13;

＆＃13;

来自MDN on the a tag href attribute：

  

<强> HREF

     

这是定义超文本源链接的锚的唯一必需属性，但在HTML5中不再需要。

悬停时手形光标怎么样？

对于没有a的{​​{1}}标记，浏览器的默认样式可能无法将光标更改为指针。您可以使用以下CSS进行普遍更改。

＆＃13;

＆＃13;

href

＆＃13;

a {
    cursor: pointer;
}

＆＃13;

＆＃13;

＆＃13;

然而，对它更具选择性可能更好，并且只将它应用于你想要添加事件处理程序的元素。

如何让它可以选择？？

只需将<a>Do Nothing</a>添加到元素中即可。

＆＃13;

＆＃13;

tabindex="0"

＆＃13;

＆＃13;

＆＃13;

使用没有链接的<a tabindex="0">Do Nothing</a>标记是否有意义？

通常不行，最好使用a元素，并使用CSS设置样式。但无论你使用什么，尽可能避免使用像button之类的任意元素，因为这根本不是语义。

Answer 4

不要把它变成一个链接（虽然它更喜欢这样做）并用CSS设置样式，使它看起来像一个链接：

p.not-a-link { text-decoration: underline; cursor: pointer } 

或者甚至更好，只需将其设为链接，并使用e.preventDefault()使用的javascript函数来阻止链接。

同时添加href的链接，以便没有启用JS的用户仍然可以使用它（作为后备）。

Answer 5

<a href="javascript:;">Link text</a> - 这就是我通常使用的

Answer 6

@ Curt的答案会起作用，但是您可以在css中使用cursor style使其看起来像一个链接，而不必费心生成虚假链接。根据浏览器的一致性使用指针或指针。

跨浏览器符合指针css（来自cursor style指南）：

element {
    cursor: pointer;
    cursor: hand;
}

Answer 7

没有人提到的一种方法是将href指向一个空的本地文件位置，如此

<a href='\\'>my dead link</a>

为什么呢？如果您使用诸如react或angular之类的框架，编译器将发出一些警告，这些警告可能会使您的日志或控制台变脏。这项技术还可以防止机器人或蜘蛛错误地连接东西。

Answer 8

正确：

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

Answer 9

不要使用<a> ...而是使用<span class='style-like-link'> 然后使用该类来设置它你想要的样式。

Answer 10

我们可以使用javascript void实现这一点，它通常涉及对表达式求值并返回undefined，其中包括在href上添加javascript:void(0);。

void运算符通常仅用于获取未定义的原始值，通常使用“ void（0）”（等效于“ void 0”）。在这些情况下，可以改用undefined全局变量（假设尚未将其分配给非默认值）。

a {
  text-decoration: initial;
}

<a href="javascript:void(0);"> This link actually does nothing when clicked</a>

Answer 11

只需删除 <a> a link </a> 属性。没必要。

df