Tag href dinonaktifkan

Meskipun tautan itu dinonaktifkan, tetap dapat diklik.

<a href="/" disabled="disabled">123n</a>

Bisakah saya membuatnya tidak dapat diklik jika dinonaktifkan? Haruskah saya menggunakan JavaScript?

Tidak ada atribut yang dinonaktifkan untuk hyperlink. Jika Anda tidak ingin sesuatu untuk ditautkan maka Anda harus menghapus <a>tag sama sekali, atau menghapus hrefatributnya.

Dengan bantuan css Anda akan menonaktifkan hyperlink. Coba di bawah ini

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

<a href="link.html" class="disabled">Link</a>

Kamu bisa memakai:

<a href="/" onclick="return false;">123n</a>

Anda dapat menggunakan salah satu solusi ini:

HTML

<a>link</a>

JavaScript

<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>

CSS

<a href="www.page.com" disabled="disabled">link</a>

<style type="text/css">
    a[disabled="disabled"] {
        pointer-events: none;
    }
</style>

Coba ini:

<a href="javascript:void(0)" style="cursor: default;">123n</a>

The <a>tag tidak memiliki disabledatribut, itu hanya untuk <input>s (dan <select>s dan<textarea> s).

Untuk "menonaktifkan" tautan, Anda dapat menghapus hrefatributnya, atau menambahkan penangan klik yang mengembalikan false.

Anda perlu menghapus <a>tag untuk menyingkirkan ini.

atau coba gunakan: -

  <a href="/" onclick="return false;">123n</a>

HTML:

<a href="/" class="btn-disabled" disabled="disabled">123n</a>

CSS:

.btn-disabled,
.btn-disabled[disabled] {
  opacity: .4;
  cursor: default !important;
  pointer-events: none;
}

Tips 1: Menggunakan CSS pointer-events: none;

Tips 2: Menggunakan JavaScript javascript:void(0) (Ini adalah praktik terbaik)

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

Tips 1: Menggunakan Jquery $('selector').attr("disabled","disabled");

Hanya CSS: ini menghapus tautan dari href.

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

Membiarkan orang tua memiliki pointer-events: noneakan menonaktifkan anak a-tagseperti ini (mengharuskan div mencakup a dan belum 0 lebar / tinggi):

<div class="disabled">
   <a href="/"></a>
</div>

dimana:

.disabled {
    pointer-events: none;
}

$(document).ready(function() {
   $('a').click(function(e) {
     e.preventDefault();
  });
});

Anda dapat menonaktifkan tautan menggunakan javascript saat dijalankan dengan menggunakan kode ini

$ ('. page-link'). css ("pointer-events", "none");

Jika Anda ingin menghilangkan pointer Anda dapat melakukan ini dengan css menggunakan kursor .

Anda dapat meniru atribut yang dinonaktifkan pada <a>tag.

<a href="link.html" disabled="">Link</a>

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

Dalam kasus saya, saya gunakan

<a href="/" onClick={e => e.preventDefault()}>

Saya punya satu:

<a href="#">This is a disabled tag.</a>

Semoga ini akan membantu Anda;)

Kami tidak dapat menonaktifkannya secara langsung tetapi kami dapat melakukan hal berikut

1. tambah type="button".
2. hapus href=""atributnya.
3. tambahkan disabledatribut sehingga itu menunjukkan bahwa itu dinonaktifkan dengan mengubah courser dan menjadi redup.

berikut ini adalah contohnya

<?php
if($status=="Approved"){ 
?>
  <a type="button" class="btn btn-primary btn-xs" disabled> EDIT
     </a>
  <?php    
}else{
?>
  <a href="index.php" class="btn btn-primary btn-xs"> EDIT
    </a>
  <?php    
}
?>

Saya dapat mencapai hasil yang diinginkan menggunakan operasi ternary ng-href

<a ng-href="{{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>

dimana

a.is-disabled{
   color: grey;
   cursor: default;

   &:hover {
      text-decoration: none;
   }
} 

Gunakan tombol dan tautan dengan benar.

• Tombol mengaktifkan fungsionalitas scripted pada halaman web (dialog, memperluas / menciutkan wilayah).

• Tautan membawa Anda ke lokasi lain, baik ke halaman lain atau lokasi berbeda di halaman yang sama.

Jika Anda mengikuti aturan ini, tidak akan ada skenario saat Anda perlu menonaktifkan tautan. Bahkan jika Anda membuat tautan terlihat dinonaktifkan secara visual dan klik kosong

<a href="" ng-click="Ctrl._isLinkActive && $ctrl.gotoMyAwesomePage()"

Anda tidak akan mempertimbangkan aksesibilitas dan pembaca layar akan membacanya sebagai tautan dan orang-orang tunanetra akan terus bertanya-tanya mengapa tautan tidak berfungsi.

Jika Anda menggunakan WordPress, saya membuat sebuah plugin yang dapat melakukan ini & lebih banyak lagi tanpa perlu tahu cara membuat kode apa pun. Yang perlu Anda lakukan adalah menambahkan pemilih tautan yang ingin Anda nonaktifkan & kemudian pilih "Nonaktifkan semua tautan dengan pemilih ini di tab baru." dari menu dropdown yang muncul dan klik pembaruan.

Klik di sini untuk melihat gif yang menunjukkan ini

Anda bisa mendapatkan versi gratis dari repositori Plugin WordPress.org untuk mencobanya.

Berikut ini berbagai cara untuk menonaktifkan tanda:

<a >Link Text</a> remove the href from your anchor tag
<a href=”javascript:void(0)”/>Link text</a> put javascript:void(0) in href
<a href="/" onclick="return false;">Link text</a> using return false

Karena tidak ada atribut yang dinonaktifkan untuk tag anchor. Jika Anda ingin menghentikan perilaku tag anchor di dalam fungsi jQuery daripada Anda dapat menggunakan baris di bawah ini di awal fungsi:

$( "a" ).click(function( e ) {
e.preventDefault();
$( "<div>" )
.append( "default " + e.type + " prevented" )
.appendTo( "#log" );
});

event.preventDefault ()

Saya melihat sudah ada satu ton jawaban yang diposting di sini, tetapi saya tidak berpikir ada yang jelas belum yang menggabungkan pendekatan yang telah disebutkan ke dalam yang saya temukan berhasil. Ini untuk membuat tautan keduanya tampak dinonaktifkan, dan juga tidak mengarahkan pengguna ke halaman lain.

Jawaban ini mengasumsikan Anda menggunakan jquery dan bootstrap , dan menggunakan properti lain untuk menyimpan sementara hrefproperti sementara dinonaktifkan.

//situation where link enable/disable should be toggled
function toggle_links(enable) {
    if (enable) {
        $('.toggle-link')
        .removeClass('disabled')
        .prop('href', $(this).attr('data-href'))
    }
    else {
        $('.toggle-link')
        .addClass('disabled')
        .prop('data-href', $(this).prop('href'))
        .prop('href','#')
    }

a.disabled {
  cursor: default;
}

Apa pun yang ada di tag href akan ditampilkan di kiri bawah jendela browser ketika Anda mengarahkan mouse ke sana.

Saya pribadi berpikir memiliki sesuatu seperti javascript: void (0) yang ditampilkan kepada pengguna mengerikan.

Sebagai gantinya, tinggalkan href off, lakukan sihir Anda dengan jQuery / apa pun dan tambahkan aturan gaya (jika Anda masih membutuhkannya agar terlihat seperti tautan):

a {
    cursor:pointer;
}

Jawaban terbaik selalu yang paling sederhana. Tidak perlu coding.

Jika tag anchor (a) tidak memiliki atribut href, itu hanya pengganti untuk hyperlink. Didukung oleh semua browser!

<a href="/">free web counters</a><br  />
<a "/">free web counters</a>

Anda dapat menonaktifkan tag jangkar dengan mengembalikan false. Dalam kasus saya, saya menggunakan sudut dan ng-dinonaktifkan untuk akordeon Jquery dan saya perlu menonaktifkan bagian.

Jadi saya membuat cuplikan js kecil untuk memperbaikinya.

       <a class="opener" data-toggle="collapse"
                   data-parent="#shipping-detail"
                   id="shipping-detail-section"
                   href="#shipping-address"
                   aria-expanded="true"
                   ng-disabled="checkoutState.addressSec">
                   Shipping Address</a>
     <script>
          $("a.opener").on("click", function () {
           var disabled = $(this).attr("disabled");
           if (disabled === 'disabled') {
            return false;
           }
           });
     </script>

jika Anda hanya ingin menonaktifkan sementara tautan tetapi meninggalkan href di sana untuk mengaktifkan nanti (yang ingin saya lakukan) saya menemukan bahwa semua browser menggunakan href pertama. Karena itu saya dapat melakukan:

<a class="ea-link" href="javascript:void(0)" href="/export/">Export</a>

Varian yang cocok untuk saya:

<script>
  function locker(){
    if ($("a").hasClass("locked")) {
         $("a").removeClass('locked').addClass('unlocked');
         $("a").attr("onClick","return false");
    } else {
         $("a").css("onclick","true");
         $("a").removeClass('unlocked').addClass('locked');
         $("a").attr("onClick","");
    }
  }
</script>

<button onclick="locker()">unlock</button>

<a href="http://some.site.com" class="locked">
  <div> 
      .... 
  <div>
</a>

<a href="/" disabled="true" onclick="return false">123</a>

Hanya menambahkan: Ini berfungsi secara umum, namun tidak akan berfungsi jika pengguna telah menonaktifkan javascript di browser.

1) Anda secara opsional dapat menggunakan kelas Bootstrap 3 pada tag jangkar Anda untuk menonaktifkan tag href, setelah mengintegrasikan plugin bootstrap 3 lakukan

<a href="/" class="btn btn-primary disabled">123n</a>

Atau

2) Pelajari cara mengaktifkan javascript menggunakan html atau js di browser. atau buat pengguna yang memberi tahu pop-up untuk mengaktifkan javascript sebelum menggunakan situs web