有沒有辦法用CSS禁用一個鏈接？

我有一個名為current-page的類，并希望禁用與該類的鏈接，以便當它們被單擊時不會發生任何操作。

從這個解決方案中:

[aria-current="page"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

<a href="link.html" aria-current="page">Link</a>

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

<a href="#" class="disabled">link</a>

CSS只能用來改變某個東西的風格。對于純CSS來說，你能做的最好的事情就是完全隱藏鏈接。

你真正需要的是一些JavaScript代碼。下面是如何使用jQuery庫做您想做的事情。

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

CSS不能禁用鏈接。它可以禁止點擊等指針事件，但點擊并不是激活鏈接的唯一方式。您的選擇是:

不要在& lta & gt標簽。 使用document.querySelector等查找要禁用的錨元素。移除它們的href或onclick屬性，使它們不再具有可以被任何方法激活的鏈接行為。 您可以將href屬性設置為javascript:void(0):

.disabled {
  /* Disabled link style */
  color: black;
}

<a class="disabled" href="javascript:void(0)">LINK</a>

如果您希望它只是CSS，禁用邏輯應該由CSS定義。

要移動CSS定義中的邏輯，您必須使用屬性選擇器。以下是一些例子:

禁用具有精確href的鏈接:= 您可以選擇禁用包含特定href值的鏈接，如下所示:

<a href="//website.com/exact/path">Exact path</a>

[href="//website.com/exact/path"]{
  pointer-events: none;
}

禁用包含一段路徑的鏈接:*= 這里，路徑中包含/keyword/的任何鏈接都將被禁用:

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

禁用以^=開頭的鏈接 [attribute^=value]運算符以一個以特定值開頭的屬性為目標。它允許您丟棄網站和根路徑。

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

您甚至可以使用它來禁用非https鏈接。例如:

a:not([href^="https://"]){
  pointer-events: none;
}

禁用以:$=結尾的鏈接 [attribute$=value]運算符的目標是以特定值結尾的屬性。丟棄文件擴展名會很有用。

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

或者任何其他屬性 CSS可以針對任何HTML屬性。可以是rel、target、data-custom等等...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

組合屬性選擇器 您可以鏈接多個規則。假設您想要禁用所有外部鏈接，但不是指向您網站的鏈接:

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

或者禁用指向特定網站的pdf文件的鏈接:

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

瀏覽器支持 從Internet Explorer 7開始就支持屬性選擇器。和:not()選擇器。

我使用了:

.current-page a:hover {
    pointer-events: none !important;
}

這還不夠。在一些瀏覽器中，它仍然顯示鏈接，閃爍。

我不得不補充:

.current-page a {
    cursor: text !important;
}

在HTML上應用下面的類。

.avoid-clicks {
  pointer-events: none;
}

如果你想在表單上只使用HTML/CSS，另一個選擇是使用按鈕。樣式化它并設置disabled屬性。

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

用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的最好的。

試試這個:

<style>
    .btn-disable {
        display: inline-block;
        pointer-events: none;
    }
</style>

指針事件屬性允許控制HTML元素 響應鼠標/觸摸事件——包括CSS懸停/活動狀態， JavaScript中的單擊/點擊事件，以及光標是否 可見。

這不是禁用鏈接的唯一方法，但這是一種很好的CSS方法，在Internet Explorer 10(及更高版本)和所有新瀏覽器中都有效:

.current-page {
  pointer-events: none;
  color: grey;
}

<a href="#" class="current-page">This link is disabled</a>

我在網上搜了一下，沒有找到比這更好的了。 基本上，要禁用按鈕點擊功能，只需使用jQuery添加CSS樣式，如下所示:

$("#myLink").css({ 'pointer-events': 'none' });

然后，要再次啟用它，請執行以下操作

$("#myLink").css({ 'pointer-events': '' });

在Firefox和Internet Explorer 11上檢查過了，效果不錯。

body{
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}
a.disable{
  pointer-events: none;
  color: black;
  text-decoration: none;
}

<a >Normal</a>
<a  class="disable">Disable</a>

您可以使用以下CSS內容:

a.button,button {
    display: inline-block;
    padding: 6px 15px;
    margin: 5px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    -moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    -webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    box-shadow: inset 0 3px 20px 0 #cdcdcd;
}

a[disabled].button,button[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
    -webkit-touch-callout: none;
}

a.button:active:not([disabled]),button:active:not([disabled]) {
    background-color: transparent !important;
    color: #2a2a2a !important;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
}

<button disabled="disabled">disabled!</button>
<button>click me!</button>
<a  disabled="disabled" class="button">test</a>
<a  class="button">test2</a>

我結合了多種方法來提供一些更高級的禁用功能。下面是一個要點，代碼在下面。

這提供了多級防御，因此標記為disable的錨實際上也是如此。

使用這種方法，你得到一個錨，你不能:

點擊 跳至并按回車鍵 點擊它會將焦點移動到下一個可聚焦的元素 它知道錨是否隨后被啟用

包括這個CSS內容，因為它是第一道防線。這假設您使用的選擇器是“a.disabled”。

a.disabled {
  pointer-events: none;
  cursor: default;
}

接下來，實例化該類，例如(使用可選選擇器):

$ ->
   new AnchorDisabler()

下面是CoffeeScript類:

class AnchorDisabler
   constructor: (selector = 'a.disabled') ->
     $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

   isStillDisabled: (ev) =>
     ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
     target = $(ev.target)
     return true if target.hasClass('disabled')
     return true if target.attr('disabled') is 'disabled'
     return false

   onFocus: (ev) =>
     ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
     return unless @isStillDisabled(ev)

     focusables = $(':focusable')
     return unless focusables

     current = focusables.index(ev.target)
     next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

     next.focus() if next


   onClick: (ev) =>
     # disabled could be dynamically removed
     return unless @isStillDisabled(ev)

     ev.preventDefault()
     return false

   onKeyup: (ev) =>

     # 13 is the JavaScript key code for Enter. We are only interested in disabling that, so get out fast
     code = ev.keyCode or ev.which
     return unless code is 13

     # disabled could be dynamically removed
     return unless @isStillDisabled(ev)

     ev.preventDefault()
     return false

您還可以調整另一個元素的大小，使其覆蓋鏈接(使用正確的z索引):這將“吃掉”點擊。

(我們是偶然發現這一點的，因為當瀏覽器窗口為手機大小時，由于“響應式”設計導致H2覆蓋了它們，我們遇到了突然不活動的鏈接的問題。)

在這里演示 試試這個

$('html').on('click', 'a.Link', function(event){
    event.preventDefault();
});

你也可以試試這個

<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中可以做到:

.disabled{
  cursor: default;
  pointer-events: none;
  text-decoration: none;
  color: black;
}

<a  target="_blank" class="disabled">Google</a>

另一個技巧是在它上面放置一個看不見的元素。這也將禁用任何懸停效果

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

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

指針事件:無將禁用鏈接:

.disabled {
    pointer-events: none;
}

<a href="#" class="disabled">link</a>

<a href="#!">1) Link With Non-directed url</a><br><br>

<a href="#!" disabled >2) Link With with disable url</a><br><br>

簡單地使用沒有鏈接的標簽，不要包含任何鏈接屬性。