是否可以使用CSS将HTML锚标记设为不可点击/不可链接？

例如，如果我有这个：

<a style="" href="page.html">page link</a>

有什么我可以使用的style属性来实现的，因此链接不可单击并且不会带我到page.html吗？

或者，我唯一的选择是不简单地将“页面链接”不包装在锚标记中？

编辑：我想说明为什么要这样做，以便人们可以提供更好的建议。我正在尝试设置我的应用程序，以便开发人员可以选择他们想要的导航样式类型。

因此，我有一个链接列表，当前始终选择一个链接，而其他所有链接都没有。对于未选择的链接，我显然希望这些链接是普通的可点击锚标记。但是对于选定的链接，有些人希望链接保持可单击状态，而另一些人则希望使其不能单击。

现在，我可以轻松地以编程方式不将锚定标签包裹在所选链接周围。但我认为，如果始终可以将所选链接包装成类似以下内容，它将更加优雅：

<a id="current" href="link.html">link</a>

然后让开发人员通过CSS控制链接样式。

您可以使用以下CSS：

.inactiveLink {
   pointer-events: none;
   cursor: default;
}

然后将类分配给您的html代码：

<a style="" href="page.html" class="inactiveLink">page link</a>

它使链接不可单击，光标样式变为箭头，而不是链接所具有的手形。

或在html中使用此样式：

<a style="pointer-events: none; cursor: default;" href="page.html">page link</a>

但我建议第一种方法。

使用CSS不太容易，因为它不是一种行为语言（即JavaScript），唯一简单的方法是在锚点上使用JavaScript OnClick事件并将其返回为false，这可能是最短的代码您可以为此：

<a href="page.html" onclick="return false">page link</a>

是的。可以使用CSS

<a class="disable-me" href="page.html">page link</a>

.disable-me {
    pointer-events: none;
}

或纯HTML和CSS，没有任何事件：

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>

CSS旨在影响表示方式，而非行为。

您可以使用一些JavaScript。

document.links[0].onclick = function(event) {
   event.preventDefault();
};

更为不显眼的方式（假设您使用jQuery）：

HTML：

<a id="my-link" href="page.html">page link</a>

Javascript：

$('#my-link').click(function(e)
{
    e.preventDefault();
});

这样做的好处是逻辑与表示之间的清晰分离。如果有一天您决定该链接可以执行其他操作，则不必麻烦标记，只需使用JS。

答案是：

<a href="page.html" onclick="return false">page link</a>

可以在CSS中完成，非常简单。将“ a”更改为“ p”。如果您要使其无法点击，则“页面链接”无论如何都不会指向某个地方。

当您告诉CSS对这个特定的“ p”执行悬停操作时，请告诉它：

（对于此示例，我为“ p”赋予了“示例” ID）

#example
{
  cursor:default;
}

现在，您的光标将保持与整个页面相同。

<a href="page.html" onclick="return false" style="cursor:default;">page link</a>