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

Question

例如,如果我有这个:

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

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

或者我唯一的选择是不将"页面链接"包装在锚标记中？

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

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

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

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