是否有一种方法禁用链接使用CSS?

我有一个名为current-page的类,并希望禁用该类的链接,以便在单击它们时不发生任何操作。


当前回答

简单地使用你的标签没有链接,不包括任何链接属性。

其他回答

你也可以试试这个

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

CSS只能用来改变一些东西的样式。使用纯CSS所能做的最好的事情就是完全隐藏链接。

您真正需要的是一些JavaScript代码。下面是如何使用jQuery库完成您想做的事情。

$('a.current-page').click(function() { return false; });

如果你想在表单上只使用HTML/CSS,另一种选择是使用按钮。设置它的样式并设置disabled属性。

如。 http://jsfiddle.net/cFTxH/1/

另一个技巧是在上面放置一个看不见的元素。这将禁用任何悬停效果以及

.myButton{
    position: absolute;
    display: none;
}

.myButton::after{
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

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>