是否有一种方法禁用链接使用CSS?
我有一个名为current-page的类,并希望禁用该类的链接,以便在单击它们时不发生任何操作。
是否有一种方法禁用链接使用CSS?
我有一个名为current-page的类,并希望禁用该类的链接,以便在单击它们时不发生任何操作。
当前回答
如果你想在表单上只使用HTML/CSS,另一种选择是使用按钮。设置它的样式并设置disabled属性。
如。 http://jsfiddle.net/cFTxH/1/
其他回答
我使用:
.current-page a:hover {
pointer-events: none !important;
}
这还不够;在某些浏览器中,它仍然会闪烁着显示链接。
我必须补充一句:
.current-page a {
cursor: text !important;
}
你可以用CSS来做这件事的一种方法是在包装div上设置一个CSS,你设置它消失,其他东西会取代它的位置。
例如:
<div class="disabled">
<a class="toggleLink" href="wherever">blah</a>
<span class="toggleLink">blah</span
</div>
使用CSS
.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }
要真正关闭a,您必须替换它的click事件或href,如其他人所述。
PS:澄清一下,我认为这是一个相当不整洁的解决方案,对于SEO来说也不是最好的,但我相信它是纯CSS最好的。
身体{ font-family: 'Roboto', sans-serif; 粗细:500; } a.disable { pointer-events:没有; 颜色:黑色; 文字修饰:没有; } 正常< a href = " https://example.com " > < / > <a href="https://example.com" class="disable"> disable </a> .
你也可以试试这个
<style> .btn-disable { pointer-events: none !important; color: currentColor; cursor: not-allowed; opacity: 0.6; text-decoration: none; } </style> <html> <head> <title>NG</title> </head> <style> .btn-disable { pointer-events: none !important; color: currentColor; cursor: not-allowed; opacity: 0.6; text-decoration: none; } </style> <body> <div class="btn-disable"> <input type="button" value="Show"> </div> </body> </html>
Bootstrap禁用链接
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
Bootstrap禁用按钮,但它看起来像链接
<button type="button" class="btn btn-link">Link</button>