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

例如，如果我有这个:

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

有没有什么东西可以用于 style 属性，这样链接就不会被点击，也不会带我到 page.html？

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

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

因此，我有一个链接列表，其中一个总是当前选中，而其他所有链接都没有。对于那些没有被选中的链接，我当然希望它们是普通的可点击的锚标记。但是对于选定的链接，有些人更喜欢该链接保持可点击，而其他人则喜欢使其不可点击。

现在，我可以很容易地通过编程不在选定的链接周围包装锚标记。但是我认为如果我总是能够将所选的链接包装成这样的形式，那么会更加优雅:

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

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

268720 次浏览
小开

答案是:

<a href="page.html" onclick="return false">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 即可。

小开

或者纯 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) ，唯一简单的方法就是在你的锚上使用一个 JavaScript OnClick 事件并将其返回为 false，这可能是你能用来做这件事的最短的代码:

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

是的. . 有可能使用 CSS

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


.disable-me {
pointer-events: none;
}
小开
最佳答案

你可以使用这个 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 中很简单地完成。将“ a”改为“ p”。 你的“页面链接”无论如何不会导致某个地方，如果你想让它不可点击。

当你告诉你的 CSS 在这个特定的“ p”上做一个悬停动作时，告诉它:

(对于这个示例，我已经给了“ p”“ example”ID)

#example
{
cursor:default;
}

现在您的光标将保持不变，因为它在整个页面上都是这样。

小开

和你一样简单。 把 **javascript:void(0)**放到 href 里，看看效果如何 例如。

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

没有 CSS，没有 JS 需要这一点

小开

提问者特别要求提供 CSS 解决方案，但是根据回答，为了保持 href = ‘ page.html’，需要添加更多的行。对我来说正确的方法应该是添加 onclick HTML 属性。以下是解决方案:

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

这样，href 链接可以保留在编码中，以备将来使用。


提交答案