Bagaimana cara menonaktifkan tautan href di JavaScript?

Saya memiliki tag <a href="#"> Previous </a> 1 2 3 4 <a href="#"> Next </a>dan dalam beberapa kondisi saya ingin tag ini dinonaktifkan sepenuhnya.

Kode dari komentar (begini cara link dibuat)

if (n_index != n_pages) 
    a = a+'<li><a href="#" onclick="javascript:paginateAjaxPage('+(n_index+1) +','+stype+');">></a></li><li><a href="#" onclick="javascript:paginateAjaxPage('+n_pages+','+stype+');" >>></a></li>'; 
else 
    a = a+'<li><a style="cursor: pointer;" onclick="return false;">></a></li><li><a style="cursor: pointer;" onclick="return false" >>></a></li>'; 
a = a+'</ul></div>';

Coba ini ketika Anda tidak ingin pengguna mengalihkan saat diklik

<a href="javascript: void(0)">I am a useless link</a>

Anda dapat menonaktifkan semua link di halaman dengan kelas gaya ini:

a {
    pointer-events:none;
}

Sekarang tentu saja triknya adalah menonaktifkan tautan hanya jika Anda perlu, ini adalah cara melakukannya:

gunakan kelas A kosong, seperti ini:

a {}

lalu saat Anda ingin menonaktifkan tautan, lakukan ini:

    GetStyleClass('a').pointerEvents = "none"

    function GetStyleClass(className)
    {
       for (var i=0; i< document.styleSheets.length; i++) {
          var styleSheet = document.styleSheets[i]

          var rules = styleSheet.cssRules || styleSheet.rules

          for (var j=0; j<rules.length; j++) {
             var rule = rules[j]

             if (rule.selectorText === className) {
                return(rule.style)
             }
          }
       }

       return 0
    }

CATATAN: Nama aturan CSS diubah menjadi huruf kecil di beberapa browser, dan kode ini peka huruf besar / kecil, jadi lebih baik gunakan nama kelas huruf kecil untuk ini

untuk mengaktifkan kembali tautan:

GetStyleClass('a').pointerEvents = ""

periksa halaman ini http://caniuse.com/pointer-events untuk informasi tentang kompatibilitas browser

Saya pikir ini adalah cara terbaik untuk melakukannya, tetapi sayangnya IE, seperti biasa, tidak akan mengizinkannya :) Saya tetap memposting ini, karena menurut saya ini berisi informasi yang dapat berguna, dan karena beberapa proyek menggunakan browser yang tahu , seperti saat Anda menggunakan tampilan web di perangkat seluler.

jika Anda hanya ingin menonaktifkan SATU link (saya hanya menyadari bahwa itulah pertanyaannya), saya akan menggunakan fungsi yang secara manual menetapkan url halaman saat ini, atau tidak, berdasarkan kondisi itu. (seperti solusi yang Anda terima)

pertanyaan ini jauh lebih mudah dari yang saya kira :)

Anda cukup memberikan hash kosong:

anchor.href = "#";

atau jika itu tidak cukup baik untuk "menonaktifkan", gunakan pengendali kejadian:

anchor.href = "javascript:void(0)";

Coba ini menggunakan jQuery:

$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

anchor.href = null;

(function ($) {
    $( window ).load(function() {
        $('.navbar a').unbind('click');
        $('.navbar a').click(function () {
            //DO SOMETHING
            return false;
        });
    });
})(jQuery);

Saya menemukan cara ini lebih mudah untuk diterapkan. Dan itu memiliki keuntungan yang Anda js. Tidak di dalam html Anda, tetapi di file yang berbeda. Saya pikir tanpa pelepasan. Kedua acara tersebut masih aktif. Tidak yakin. Tapi di satu sisi Anda hanya membutuhkan acara yang satu ini

MDN merekomendasikan element.removeAttribute(attrName);untuk menyetel atribut ke null (atau nilai lain) saat Anda ingin menonaktifkannya. Dalam hal ini akan terjadielement.removeAttribute("href");

https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute

Cara termudah untuk menonaktifkan tautan adalah dengan tidak menampilkannya. Jalankan fungsi ini setiap kali Anda ingin menguji apakah kondisi Anda terpenuhi untuk menyembunyikan tombol Sebelumnya (ganti if (true)dengan kondisi Anda):

var testHideNav = function() {
    var aTags = document.getElementsByTagName('a'),
        atl = aTags.length,
        i;

    for (i = 0; i < atl; i++) {
        if (aTags[i].innerText == "Previous") {
            if (true) { // your condition to disable previous
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        } else if (aTags[i].innerText == "Next") {
            if (false) { // your condition to disable next
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        }
    }
};

Kemudian jalankan testHideNav()kapan pun Anda perlu memeriksa apakah kondisi Anda telah berubah.

Gunakan span dan onclick javascript sebagai gantinya. Beberapa browser "melompat" jika Anda memiliki link dan href "#".

Ini juga mungkin:

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

Tautan tidak kemana-mana karena fungsi Anda akan dieksekusi.

Saya memiliki kebutuhan serupa, tetapi motivasi saya adalah mencegah tautan diklik dua kali. Saya menyelesaikannya menggunakan jQuery:

$(document).ready(function() {
    $("#myLink").on('click', doSubmit);
});

var doSubmit = function() {
    $("#myLink").off('click');
    // do things here
};

HTML-nya terlihat seperti ini:

<a href='javascript: void(0);' id="myLink">click here</a>

Jadi solusi di atas membuat tautan tidak berfungsi, tetapi jangan membuatnya terlihat (AFAICT) bahwa tautan tersebut tidak lagi valid. Saya mengalami situasi di mana saya memiliki serangkaian halaman dan ingin menonaktifkan (dan membuatnya jelas bahwa ini dinonaktifkan) link yang mengarah ke halaman saat ini.

Begitu:

window.onload = function() {
    var topics = document.getElementsByClassName("topics");
    for (var i = topics.length-1; i > -1; i-- ) {
        for (var j = topics[i].childNodes.length-1; j > -1; j--) {
             if (topics[i].childNodes[j].nodeType == 1) {
                if (topics[i].childNodes[j].firstChild.attributes[0].nodeValue == this.n_root3) {
                    topics[i].childNodes[j].innerHTML = topics[i].childNodes[j].firstChild.innerHTML;
                }
            }
        }
    }
}

Ini berjalan melalui daftar tautan, menemukan salah satu yang mengarah ke halaman saat ini (n_root3 mungkin merupakan hal lokal, tetapi saya membayangkan documentharus memiliki sesuatu yang serupa), dan mengganti tautan dengan konten teks tautan.

HTH

Terima kasih semua...

Masalah saya diselesaikan dengan kode di bawah ini:

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

Instal plugin ini untuk jquery dan gunakan

http://plugins.jquery.com/project/jqueryenabledisable

Ini memungkinkan Anda untuk menonaktifkan / mengaktifkan hampir semua bidang di halaman.

Jika Anda ingin membuka halaman dengan kondisi tertentu, tulis fungsi java script dan panggil dari href. Jika kondisi sudah puas Anda buka halaman sebaliknya tinggal melakukan apa-apa.

kode terlihat seperti ini:

<a href="javascript: openPage()" >Click here</a>

and function:
function openPage()
{
if(some conditon)
opener.document.location = "http://www.google.com";
}
}

Anda juga dapat meletakkan tautan di div dan menyetel properti tampilan dari atribut Style ke none. ini akan menyembunyikan div. Misalnya,

<div id="divid" style="display:none">
<a href="Hiding Link" />
</div>

Ini akan menyembunyikan tautan. Gunakan tombol atau gambar untuk membuat div ini terlihat sekarang dengan memanggil fungsi ini di onclick sebagai:

<a href="Visible Link" onclick="showDiv()">

and write the js code as:

function showDiv(){
document.getElememtById("divid").style.display="block";
}

Anda juga bisa meletakkan tag id ke tag html, jadi itu akan terjadi

<a id="myATag" href="whatever"></a>

Dan dapatkan id ini di javascript Anda dengan menggunakan

document.getElementById("myATag").value="#"; 

Salah satunya pasti berhasil haha

Metode lain untuk menonaktifkan tautan

element.removeAttribute('href');

tag anchor tanpa href akan bereaksi sebagai nonaktif / teks biasa

<a> w/o href </a>

dari pada <a href="#"> with href </a>

lihat jsFiddel

semoga bermanfaat.

Selain void, Anda juga dapat menggunakan:

<a href="javascript:;">this link is disabled</a> 

0) Anda sebaiknya mengingat bahwa Beberapa browser "melompat" jika Anda memiliki link dan href "#". Jadi cara terbaik adalah menggunakan JavaScript khusus

1) Jika Anda mencari JavaScript khusus , ini dia:

<a href="#" onclick="DoSomething(); return false;">Link</a>

The "return false" mencegah tautan agar tidak benar-benar diikuti.

2) Anda dapat mempertimbangkan untuk tidak menggunakan mengikuti

<a href="javascript:void(0);" onclick="DoSomething();">Link</a>

atau

  <a href="javascript:;" onclick="DoSomething();">Link</a>

Karena protokol semu javascript dapat membuat halaman dalam status menunggu di beberapa browser, yang dapat menimbulkan konsekuensi yang tidak terduga. IE6 dikenal untuk itu. Tetapi Jika Anda tidak peduli tentang IE6, dan Anda menguji semuanya - ini mungkin solusi yang baik.

3) Jika Anda sudah memiliki jQuerydan bootstrapdalam proyek Anda, Anda dapat menggunakannya seperti ini:

$('.one-click').on("click", function (e) {
   $( this ).addClass('disabled');
});

dimana .disabledkelas berasal dari bootstrap.

Situs bootstrap formulir Qupte (di sini )

Peringatan fungsi tautan

Kelas .disabled digunakan pointer-events: noneuntuk mencoba menonaktifkan fungsionalitas tautan, tetapi properti CSS tersebut belum distandarisasi. Selain itu, bahkan di browser yang mendukung peristiwa penunjuk: tidak ada, navigasi keyboard tetap tidak terpengaruh, yang berarti bahwa pengguna keyboard yang dapat melihat dan pengguna teknologi bantuan masih dapat mengaktifkan tautan ini. Jadi untuk amannya, tambahkan tabindex="-1"atribut pada tautan ini (untuk mencegahnya menerima fokus keyboard) dan gunakan custom JavaScriptuntuk menonaktifkan fungsinya.

dan custom JavaScripttelah ditunjukkan di bagian 1

Kode di bawah ini untuk tautan yang dinonaktifkan:

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

solusi lain yang sangat sederhana adalah:

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

Solusi pertama adalah efisien.