Pertanyaan Bagaimana cara menonaktifkan tautan hanya menggunakan CSS?


Apakah ada cara untuk menonaktifkan tautan menggunakan CSS?

Saya memiliki kelas yang disebut current-page dan ingin tautan dengan kelas ini dinonaktifkan sehingga tidak ada tindakan yang terjadi saat diklik.


749
2018-01-19 04:55


asal


Jawaban:


Jawabannya sudah ada di komentar pertanyaan. Untuk visibilitas lebih lanjut, saya menyalin solusi ini 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 solusi; Lihat jawaban ini.

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


1211
2017-10-04 06:05



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


119
2018-01-19 05:01



CSS hanya dapat digunakan untuk mengubah gaya sesuatu. Hal terbaik yang mungkin bisa Anda lakukan dengan CSS murni adalah menyembunyikan tautan sama sekali.

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

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

118
2018-01-19 05:00



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

  • Jangan sertakan href atribut di Anda <a> tag.
  • Gunakan JavaScript, untuk menemukan elemen jangkar dengan itu class, dan hapus mereka href atau onclick atribut yang sesuai. jQuery akan membantu Anda dengan itu (NickF menunjukkan bagaimana melakukan sesuatu yang serupa tetapi lebih baik).

32
2018-04-10 05:53



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

Tombol Bootstrap Dinonaktifkan tetapi terlihat seperti tautan

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

28
2018-01-19 05:01



Anda dapat mengatur href atribut untuk javascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}
<a class="disabled" href="javascript:void(0)">LINK</a>


18
2017-12-27 18:00



Jika Anda ingin tetap hanya HTML / CSS pada formulir, pilihan lain adalah menggunakan tombol. Beri gaya dan atur disabled atribut.

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


10
2018-01-19 05:18



Satu-satunya cara Anda dapat melakukan ini tanpa CSS adalah dengan mengatur CSS pada div pembungkus yang membuat Anda menghilang dan sesuatu yang lain mengambil tempatnya.

MISALNYA:

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

Dengan CSS suka

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

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

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


10
2017-09-26 05:05



Coba ini:

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

9
2017-10-06 10:50