是否有可能使HTML锚点标签不可点击/链接使用CSS？

例如，如果我有这个：

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

有什么我可以使用的样式属性，这将使链接是不可点击的，不会带我到page.html。

或者，我是唯一的select，只是不包装“页面链接”锚定标签？

编辑：我想陈述为什么我想这样做，以便人们可以提供更好的build议。 我试图设置我的应用程序，以便开发人员可以select他们想要的导航types。

所以我有一个链接列表，其中一个总是被选中，其他的都不是。 对于没有select的链接，我显然希望那些是正常的可点击定位标记。 但是对于选定的链接，有些人更喜欢链接保持可点击，而其他人则喜欢使其不可点击。

现在我可以很容易地以编程方式不在所选链接周围包装锚定标记。 但是我觉得如果我总是可以将选定的链接包装成如下forms，那么它会更加优雅：

<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> 

但我build议第一种方法。

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的devise是为了影响performance，而不是行为。

你可以使用一些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”上做一个hover动作时，告诉它：

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

 #example { cursor:default; } 

现在你的光标将保持不变，因为它遍布整个页面。