Bagaimana Anda membuat tautan tautan tidak dapat diklik atau dinonaktifkan?

Saya memiliki tautan jangkar yang ingin saya nonaktifkan setelah pengguna mengekliknya. Atau, hapus tag jangkar dari sekitar teks, tapi tetap pertahankan teksnya.

<a href='' id='ThisLink'>some text</a>

Saya dapat melakukan ini dengan mudah menggunakan tombol dengan menambahkan .attr("disabled", "disabled");
Saya berhasil menambahkan properti yang dinonaktifkan, tetapi tautannya masih dapat diklik.
Saya tidak terlalu peduli jika teksnya digarisbawahi atau tidak.

Ada petunjuk?

Saat Anda mengklik musisi yang salah, seharusnya hanya menambahkan "Salah" dan kemudian menjadi tidak dapat diklik.
Ketika Anda mengklik dan Anda benar, itu harus menambahkan "Keren" dan kemudian menonaktifkan semua <a>tag.

Saya baru menyadari apa yang Anda minta (saya harap). Inilah solusi yang buruk

var preventClick = false;

$('#ThisLink').click(function(e) {
    $(this)
       .css('cursor', 'default')
       .css('text-decoration', 'none')

    if (!preventClick) {
        $(this).html($(this).html() + ' lalala');
    }

    preventClick = true;

    return false;
});

Metode terbersih akan menambahkan kelas dengan pointer-events: none saat Anda ingin menonaktifkan klik. Ini akan berfungsi seperti label biasa.

.disableClick{
    pointer-events: none;
}

<a href='javascript:void(0);'>some text</a>

Gunakan gaya CSS peristiwa penunjuk . (seperti yang disarankan Jason MacDonald)

Lihat MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . Ini didukung di sebagian besar browser.

Sederhana menambahkan atribut "nonaktif" ke jangkar akan melakukan pekerjaan jika Anda memiliki aturan CSS global seperti berikut:

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

$('a').removeAttr('href')

atau

$('a').click(function(){ return false})

Tergantung situasinya

Bootstrap memberi kita .disabledkelas. Silakan gunakan itu.

Tetapi .disabledkelas hanya berfungsi jika tag 'a' sudah memiliki kelas 'btn'. Ini tidak berfungsi pada tag 'a' lama mana pun. The btnkelas mungkin tidak sesuai dalam beberapa konteks karena memiliki konotasi gaya. Di bawah sampul, .disabledkelas diatur pointer-eventske none, sehingga Anda dapat membuat CSS untuk melakukan hal yang sama seperti yang disarankan Saroj Aryal dan Vitrilo. (Terima kasih, Les Nightingill atas saran ini).

Tambahkan csskelas:

.disable_a_href{
    pointer-events: none;
}

Tambahkan ini jquery:

$("#ThisLink").addClass("disable_a_href"); 

Hapus saja hrefatribut dari tag anchor.

Cara terbaik adalah dengan mencegah tindakan default. Dalam kasus tag jangkar, perilaku default mengarahkan ke hrefalamat yang ditentukan.

Jadi, javascript berikut berfungsi paling baik dalam situasi ini:

$('#ThisLink').click(function(e)
{
    e.preventDefault();
});

Anda dapat menggunakan acara onclick untuk menonaktifkan tindakan klik:

<a href='' id='ThisLink' onclick='return false'>some text</a>

Atau Anda bisa menggunakan sesuatu selain <a>tag.

Komentar Jason MacDonald berhasil untuk saya, diuji di Chrome, Mozila, dan IE.

Menambahkan warna abu-abu untuk menunjukkan efek menonaktifkan.

.disable_a_href{
    pointer-events: none;
    **color:#c0c0c0 !important;**
}

Jquery hanya memilih elemen pertama dalam daftar jangkar, menambahkan karakter meta (*) untuk memilih dan menonaktifkan semua elemen dengan id #ThisLink.

$("#ThisLink*").addClass("disable_a_href"); 

Tuliskan ini satu baris Kode jQuery

$('.hyperlink').css('pointer-events','none');

jika Anda ingin menulis dalam file css

.hyperlink{
    pointer-events: none;
}

Buat kelas berikut dalam style sheet:

  .ThisLink{
           pointer-events: none;
           cursor: default;
    }

Tambahkan kelas ini kepada Anda tautan secara dinamis sebagai berikut.

 <a href='' id='elemID'>some text</a>

    //   or using jquery
<script>
    $('#elemID').addClass('ThisLink');
 </script>

Coba ini:

$('a').contents().unwrap();

Cukup di SASS:

.some_class{
     // styles...

     &.active {
       pointer-events:none;
     }
}

Ini adalah metode yang saya gunakan untuk menonaktifkan. Semoga bisa membantu.

$("#ThisLink").attr("href","javascript:;");

$('#ThisLink').one('click',function(){
  $(this).bind('click',function(){
    return false;
  });
});

Ini akan menjadi cara lain untuk melakukan ini, penangan dengan return false, yang akan menonaktifkan tautan, akan ditambahkan setelah satu klik.

Cara termudah

Di html Anda:

<a id="foo" disabled="true">xxxxx<a>

Di js Anda:

$('#foo').attr("disabled", false);

Jika Anda menggunakannya sebagai atribut bekerja dengan sempurna