Apakah ada cara untuk menonaktifkan tautan menggunakan CSS?

Saya memiliki kelas yang dipanggil current-pagedan ingin tautan dengan kelas ini dinonaktifkan sehingga tidak ada tindakan yang terjadi ketika mereka diklik.

Jawabannya sudah ada di komentar pertanyaan. Untuk visibilitas lebih lanjut, saya menyalin solusi ini di sini:

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

<a href="link.html" class="not-active">Link</a>

Untuk dukungan browser, silakan lihat https://caniuse.com/#feat=pointer-events . Jika Anda perlu mendukung IE ada solusinya; lihat jawaban ini .

Peringatan: Penggunaan pointer-eventsdalam CSS untuk elemen non-SVG bersifat eksperimental. Fitur yang digunakan untuk menjadi bagian dari spesifikasi rancangan UI CSS3 tetapi, karena banyak masalah terbuka, telah ditunda ke CSS4.

CSS hanya bisa digunakan untuk mengubah gaya sesuatu. Yang terbaik yang bisa Anda lakukan dengan CSS murni adalah dengan menyembunyikan tautannya sama sekali.

Yang Anda butuhkan adalah javascript. Inilah cara Anda melakukan apa yang Anda inginkan menggunakan pustaka jQuery.

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

CSS tidak bisa melakukan itu. CSS hanya untuk presentasi. Pilihan Anda adalah:

• Jangan sertakan hrefatribut dalam <a>tag Anda .
• Gunakan JavaScript, untuk menemukan unsur-unsur jangkar dengan itu class, dan menghapus mereka hrefatau onclickatribut sesuai. jQuery akan membantu Anda dengan itu (NickF menunjukkan bagaimana melakukan sesuatu yang serupa tetapi lebih baik).

Bootstrap Disabled Link

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

Tombol Bootstrap Disabled tetapi terlihat seperti tautan

<button type="button" class="btn btn-link">Link</button>

Anda dapat mengatur hrefatributjavascript:void(0)

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

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

Saya menggunakan:

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

Dan itu tidak cukup; di beberapa browser masih menampilkan tautan, berkedip.

Saya harus menambahkan:

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

Jika Anda ingin tetap menggunakan HTML / CSS pada formulir, opsi lain adalah menggunakan tombol. Gaya dan atur disabledatributnya.

Misalnya http://jsfiddle.net/cFTxH/1/

Jika Anda ingin hanya menggunakan CSS, logika penonaktifan harus ditentukan oleh CSS.

Untuk memindahkan logika dalam definisi CSS, Anda harus menggunakan penyeleksi atribut. Berikut ini beberapa contohnya:

Nonaktifkan tautan yang memiliki href tepat: =

Anda dapat memilih untuk menonaktifkan tautan yang mengandung nilai href tertentu seperti:

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

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

Nonaktifkan tautan yang berisi bagian jalan: *=

Di sini, tautan apa pun yang berisi /keyword/jalur akan dinonaktifkan

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

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

Nonaktifkan tautan yang dimulai dengan: ^=

yang [attribute^=value]sasaran Operator atribut yang dimulai dengan nilai tertentu. Memungkinkan Anda membuang situs web & mem-root path.

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

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

Anda bahkan dapat menggunakannya untuk menonaktifkan tautan non-https. Sebagai contoh :

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

Nonaktifkan tautan yang diakhiri dengan: $=

The [attribute$=value]Operator menargetkan atribut yang berakhir dengan nilai tertentu. Berguna untuk membuang ekstensi file.

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

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

Atau atribut lainnya

Css dapat menargetkan atribut HTML apa pun. Bisa jadi rel, target, data-customdan seterusnya ...

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

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

Menggabungkan pemilih atribut

Anda dapat membuat beberapa aturan. Katakanlah Anda ingin menonaktifkan setiap tautan eksternal, tetapi bukan yang menunjuk ke situs web Anda:

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

Atau nonaktifkan tautan ke file pdf dari situs web tertentu:

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

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

Dukungan browser

Selektor atribut didukung sejak IE7. :not()pemilih sejak IE9.

Salah satu cara Anda bisa melakukan ini dengan CSS, adalah dengan mengatur CSS pada pembungkus divyang Anda setel untuk menghilang dan sesuatu yang lain terjadi.

Misalnya:

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

Dengan seperti CSS

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

Untuk benar-benar mematikan, aAnda harus mengganti acara klik atau href, seperti yang dijelaskan oleh orang lain.

PS: Hanya untuk mengklarifikasi saya akan menganggap ini solusi yang cukup berantakan, dan untuk SEO itu bukan yang terbaik juga, tapi saya percaya itu yang terbaik dengan CSS murni.

Coba ini:

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

Properti pointer-events memungkinkan untuk mengontrol bagaimana elemen HTML merespons peristiwa mouse / sentuh - termasuk CSS hover / status aktif, klik / ketuk acara dalam Javascript, dan apakah kursor terlihat atau tidak.

Itu bukan satu-satunya cara Anda menonaktifkan Tautan , tetapi cara CSS yang baik yang berfungsi di IE10 + dan semua peramban baru:

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

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

Saya mencari di internet dan tidak menemukan yang lebih baik dari ini . Pada dasarnya untuk menonaktifkan fungsi klik tombol, cukup tambahkan gaya CSS menggunakan jQuery seperti:

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

Kemudian untuk mengaktifkannya lagi lakukan ini

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

Diperiksa di Firefox dan IE 11, itu berhasil.

Anda dapat menggunakan css ini:

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 href="http://royansoft.com" disabled="disabled" class="button">test</a>
<a href="http://royansoft.com" class="button">test2</a>

Terima kasih kepada semua orang yang memposting solusi, saya menggabungkan beberapa pendekatan untuk menyediakan beberapa disabledfungsionalitas yang lebih maju . Ini intinya , dan kodenya di bawah.

This provides for multiple levels of defense so that Anchors marked as disable actually behave as such.
Using this approach, you get an anchor that you cannot:
  - click
  - tab to and hit return
  - tabbing to it will move focus to the next focusable element
  - it is aware if the anchor is subsequently enabled


1.  Include this css, as it is the first line of defense.  This assumes the selector you use is 'a.disabled'
    a.disabled {
      pointer-events: none;
      cursor: default;
    }

 2. Next, instantiate this class such as (with optional selector):
    $ ->
      new AnchorDisabler()

Inilah kelas coffescript:

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

Anda juga dapat mengukur elemen lain sehingga menutupi tautan (menggunakan indeks z kanan): Itu akan "memakan" klik.

(Kami menemukan ini secara tidak sengaja karena kami memiliki masalah dengan tautan yang tiba-tiba tidak aktif karena desain "responsif" yang menyebabkan H2 menutupinya ketika jendela browser berukuran ponsel.)

Demo di sini
Coba yang ini

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

Trik lain adalah menempatkan elemen tak terlihat di atasnya. Ini akan menonaktifkan efek hover juga

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

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

Dimungkinkan untuk melakukannya dalam CSS

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

<a href="https://www.google.com" target="_blank" class="disabled">Google</a>

Lihat di:

Harap perhatikan bahwa text-decoration: none;dan color: black;tidak diperlukan tetapi itu membuat tautannya lebih mirip teks biasa.

pointer-events:none akan menonaktifkan tautan:

.disabled {
       pointer-events:none;
}
<a href="#" class="disabled">link</a>