是否可以使用 CSS 使 HTML 锚标记不可点击/链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6727659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to make an HTML anchor tag not clickable/linkable using CSS?
提问by Ryan
For example if I have this:
例如，如果我有这个：
<a style="" href="page.html">page link</a>
<a style="" href="page.html">page link</a>
Is there anything I can use for the style attribute that will make it so the link isn't clickable and won't take me to page.html?
有什么我可以用于样式属性的东西，它可以使链接不可点击并且不会带我到 page.html？
Or, is my only option to simply not wrap 'page link' in an anchor tag?
或者，我唯一的选择就是不将“页面链接”包装在锚标签中？
Edit:I want to state why I want to do this so that people may be able to provide better advice. I am trying to set up my application so that the developer can choose what type of navigation style they want.
编辑：我想说明我为什么要这样做，以便人们可以提供更好的建议。我正在尝试设置我的应用程序，以便开发人员可以选择他们想要的导航样式类型。
So, I have a list of links and one is always currently selected and all the others aren't. For the links that are not selected, I obviously want those to be normal clickable anchor tags. But for the selected link, some people prefer that the link remains clickable while others like to make it not clickable.
所以，我有一个链接列表，当前总是选择一个链接，而所有其他链接都没有。对于未选中的链接，我显然希望它们是普通的可点击锚标签。但是对于选定的链接，有些人更喜欢该链接保持可点击状态，而另一些人则喜欢使其不可点击。
Now I could easily just programmatically not wrap an anchor tags around the selected link. But I figure it will be more elegant if I can always wrap the selected link in something like:
现在我可以轻松地以编程方式不围绕所选链接包装锚标记。但是我认为如果我总是可以将所选链接包装在以下内容中会更优雅：
<a id="current" href="link.html">link</a>
<a id="current" href="link.html">link</a>
and then let the developer control the linking style through CSS.
然后让开发者通过 CSS 控制链接样式。
回答by Diego Unanue
You can use this css:
你可以使用这个css：
.inactiveLink {
pointer-events: none;
cursor: default;
}
And then assign the class to your html code:
然后将类分配给您的 html 代码：
<a style="" href="page.html" class="inactiveLink">page link</a>
It makes the link not clickeable and the cursor style an arrow, not a hand as the links have.
它使链接不可点击，光标样式为箭头，而不是链接所具有的手。
or use this style in the html:
或在 html 中使用此样式：
<a style="pointer-events: none; cursor: default;" href="page.html">page link</a>
but I suggest the first approach.
但我建议第一种方法。
回答by Karan K
That isn't too easy to do with CSS, as it's not a behavioral language (ie JavaScript), the only easy way would be to use a JavaScript OnClick Event on your anchor and to return it as false, this is probably the shortest code you could use for that:
用 CSS 做这件事不太容易，因为它不是行为语言（即 JavaScript），唯一简单的方法是在锚上使用 JavaScript OnClick 事件并将其返回为 false，这可能是最短的代码你可以使用：
<a href="page.html" onclick="return false">page link</a>
回答by pown
Yes.. It is possibleusing css
是的..可以使用css
<a class="disable-me" href="page.html">page link</a>
.disable-me {
pointer-events: none;
}
回答by Paul
Or purely HTML and CSS with no events:
或者没有事件的纯 HTML 和 CSS：
<div style="z-index: 1; position: absolute;">
<a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>
回答by alex
CSS was designed to affect presentation, not behaviour.
CSS 旨在影响表现，而不是行为。
You could use some JavaScript.
你可以使用一些 JavaScript。
document.links[0].onclick = function(event) {
event.preventDefault();
};
回答by pixelfreak
A more un-obtrusive way (assuming you use jQuery):
一种更不引人注目的方式（假设您使用 jQuery）：
HTML:
HTML：
<a id="my-link" href="page.html">page link</a>
<a id="my-link" href="page.html">page link</a>
Javascript:
Javascript：
$('#my-link').click(function(e)
{
e.preventDefault();
});
The advantage of this is the clean separation between logic and presentation. If one day you decide that this link would do something else, you don't have to mess with the markup, just the JS.
这样做的好处是逻辑和表示之间的清晰分离。如果有一天你决定这个链接会做其他事情，你不必弄乱标记，只需 JS。
回答by Doa
The answer is:
答案是：
<a href="page.html" onclick="return false">page link</a>
回答by Hollnder
It can be done in css and it is very simple. change the "a" to a "p". Your "page link" does not lead to somewhere anyway if you want to make it unclickable.
它可以在css中完成，并且非常简单。将“a”更改为“p”。如果您想让它无法点击，您的“页面链接”无论如何都不会指向某个地方。
When you tell your css to do a hover action on this specific "p" tell it this:
当你告诉你的 css 在这个特定的“p”上做一个悬停动作时，告诉它：
(for this example I have given the "p" the "example" ID)
（对于这个例子，我给了“p”“例子”ID）
#example
{
cursor:default;
}
Now your cursor will stay the same as it does all over the page.
现在，您的光标将与在整个页面上一样。
回答by John
<a href="page.html" onclick="return false" style="cursor:default;">page link</a>
