Question

例如，如果我有这个：

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

是否有任何我可以使用的样式属性，因此该链接不可点击，也不会将我带到page.html。

或者我唯一的选择是不将'page link'包装在锚标记中？

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

所以我有一个链接列表，其中一个目前总是被选中而其他所有链接都没有。对于未选择的链接，我显然希望这些是正常的可点击锚标签。但是对于所选链接，有些人更喜欢链接仍然可以点击，而其他人则喜欢使其无法点击。

现在，我可以轻松地以编程方式不在所选链接周围包装锚标记。但我认为如果我总能将所选链接包装在以下内容中会更加优雅：

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

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

Answer 1

您可以使用此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>

但我建议采用第一种方法。

Answer 2

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

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

Answer 3

是.. 可以使用 css

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

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

Answer 4

或纯粹没有事件的HTML和CSS：

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

Answer 5

CSS旨在影响演示，而不是行为。

您可以使用一些JavaScript。

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

Answer 6

更加不突兀的方式（假设您使用jQuery）：

HTML：

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

使用Javascript：

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

这样做的好处是逻辑和演示之间的清晰分离。如果有一天你决定这个链接会做其他的事情，你就不必搞乱标记，只需要JS。

Answer 7

答案是：

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

Answer 8

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

Answer 9

它可以在css中完成，而且非常简单。将“a”更改为“p”。如果您想让它无法点击，那么您的“页面链接”无论如何都不会导致某个地方。

当你告诉你的css对这个特定的“p”做悬停动作时告诉它：

（对于这个例子，我给了“p”“示例”ID）

#example
{
  cursor:default;
}

现在，您的光标将与整个页面上的光标保持一致。

Answer 10

就这么简单。把**javascript:void(0)**放在href中，看看效果例如

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

不需要 Css，不需要 JS