Jak wyłączyć łącze href w JavaScript?

Mam tag <a href="#"> Previous </a> 1 2 3 4 <a href="#"> Next </a>i chcę, aby w pewnych warunkach ten tag był całkowicie wyłączony.

Kod z komentarzy (tak jest generowany link)

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

Spróbuj tego, jeśli nie chcesz, aby użytkownik przekierowywał po kliknięciu

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

możesz dezaktywować wszystkie linki na stronie z tą klasą stylu:

a {
    pointer-events:none;
}

teraz oczywiście sztuczka polega na dezaktywowaniu linków tylko wtedy, gdy trzeba, oto jak to zrobić:

użyj pustej klasy A, na przykład:

a {}

wtedy gdy chcesz dezaktywować linki, zrób to:

    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
    }

UWAGA: W niektórych przeglądarkach nazwy reguł CSS są przekształcane na małe litery, a ten kod jest wrażliwy na wielkość liter, więc lepiej używaj do tego nazw klas małych liter

aby ponownie aktywować linki:

GetStyleClass('a').pointerEvents = ""

sprawdź tę stronę http://caniuse.com/pointer-events, aby uzyskać informacje na temat zgodności przeglądarek

Myślę, że to najlepszy sposób na zrobienie tego, ale niestety IE, jak zawsze, na to nie pozwoli :) i tak to piszę, ponieważ myślę, że zawiera informacje, które mogą być przydatne, a niektóre projekty używają znanej przeglądarki , na przykład podczas korzystania z widoków internetowych na urządzeniach mobilnych.

jeśli chcesz tylko dezaktywować JEDNO łącze (zdaję sobie tylko sprawę, że było to pytanie), użyłbym funkcji, która ręcznie ustawia adres URL bieżącej strony, lub nie, na podstawie tego warunku. (jak rozwiązanie, które zaakceptowałeś)

to pytanie było DUŻO łatwiejsze niż myślałem :)

Możesz po prostu podać pusty hash:

anchor.href = "#";

lub jeśli to nie wystarczy do „wyłączenia”, użyj modułu obsługi zdarzeń:

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

Spróbuj tego za pomocą 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);

Ten sposób jest dla mnie łatwiejszy do wdrożenia. I ma tę zaletę, że ty js. Nie znajduje się w Twoim html, ale w innym pliku. Myślę, że bez rozpięcia. Oba wydarzenia są nadal aktywne. Niepewny. Ale w pewnym sensie potrzebujesz tylko tego jednego wydarzenia

MDN zaleca nadpisanie element.removeAttribute(attrName);atrybutu null (lub innej wartości), jeśli chcesz go wyłączyć. W tym przypadku tak by byłoelement.removeAttribute("href");

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

Najłatwiejszym sposobem wyłączenia linku jest po prostu nie pokazywanie go. Uruchom tę funkcję za każdym razem, gdy chcesz sprawdzić, czy twój warunek jest spełniony, aby ukryć przycisk Poprzedni (zamień na if (true)swój warunek):

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";
            }
        }
    }
};

Następnie biegnij testHideNav()za każdym razem, gdy musisz sprawdzić, czy twój stan się zmienił.

Zamiast tego użyj span i javascript onclick. Niektóre przeglądarki „skaczą”, jeśli masz link i „#” href.

To też jest możliwe:

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

Link nigdzie nie przechodzi przez twoją funkcję zostanie wykonana.

Miałem podobną potrzebę, ale moją motywacją było zapobieganie dwukrotnemu kliknięciu linku. Dokonałem tego za pomocą jQuery:

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

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

Kod HTML wygląda następująco:

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

Zatem powyższe rozwiązania powodują, że łącze nie działa, ale nie pokazuje (AFAICT), że łącze jest już nieaktualne. Mam sytuację, w której mam serię stron i chcę wyłączyć (i pokazać, że jest wyłączone) łącze wskazujące na bieżącą stronę.

Więc:

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

Spowoduje to przeglądanie listy linków, znalezienie tego, który wskazuje na bieżącą stronę (n_root3 może być lokalną rzeczą, ale wyobrażam sobie, że documentmusi mieć coś podobnego) i zastępuje łącze treścią tekstową łącza.

HTH

Dziękuję wam wszystkim...

Mój problem rozwiązał poniższy kod:

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

Zainstaluj tę wtyczkę dla jquery i używaj jej

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

Pozwala wyłączyć / włączyć prawie każde pole na stronie.

Jeśli chcesz otworzyć stronę pod jakimś warunkiem, napisz funkcję skryptu java i wywołaj ją z href. Jeśli warunek jest spełniony, otwórz stronę, w przeciwnym razie nic nie rób.

kod wygląda następująco:

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

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

Możesz również umieścić łącze w elemencie div i ustawić właściwość display atrybutu Style na none. to ukryje div. Np.

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

Spowoduje to ukrycie linku. Użyj przycisku lub obrazu, aby ten element div był teraz widoczny, wywołując tę ​​funkcję w onclick jako:

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

and write the js code as:

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

Możesz również umieścić tag id w tagu html, więc tak będzie

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

I uzyskaj ten identyfikator w swoim javascript za pomocą

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

Jeden z nich na pewno musi działać haha

Inna metoda wyłączenia linku

element.removeAttribute('href');

tag anchor bez href zareagowałby jako wyłączony / zwykły tekst

<a> w/o href </a>

zamiast <a href="#"> with href </a>

zobacz jsFiddel

mam nadzieję, że to jest pomocne.

Zamiast void możesz również użyć:

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

0) lepiej pamiętaj, że niektóre przeglądarki „skaczą”, jeśli masz link i „#” href. Najlepszym sposobem byłby niestandardowy JavaScript

1) Jeśli szukasz niestandardowego kodu JavaScript , oto on:

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

„Return false” zapobiega faktycznemu śledzeniu odsyłacza.

2) Możesz rozważyć unikanie używania następujących

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

lub

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

Ponieważ pseudo-protokół javascript może w niektórych przeglądarkach ustawić stronę w stan oczekiwania, co może mieć nieoczekiwane konsekwencje. IE6 jest z tego znana. Ale jeśli nie obchodzi cię IE6, a wszystko testujesz - może to być dobre rozwiązanie.

3) Jeśli już masz jQueryi bootstrapw swoim projekcie, możesz spojrzeć na ich użycie w następujący sposób:

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

gdzie .disabled klasa pochodzi z bootstrapu.

Qupte z witryny bootstrap ( tutaj )

Zastrzeżenie dotyczące funkcjonalności łącza

Klasa .disabled używa pointer-events: nonedo próby wyłączenia funkcji odsyłaczy s, ale ta właściwość CSS nie jest jeszcze ustandaryzowana. Ponadto nawet w przeglądarkach obsługujących zdarzenia wskaźnika: brak, nawigacja za pomocą klawiatury pozostaje niezmieniona, co oznacza, że ​​widzący użytkownicy klawiatury i użytkownicy technologii pomocniczych nadal będą mogli aktywować te łącza. Aby być bezpiecznym, dodaj tabindex="-1"atrybut do tych łączy (aby uniemożliwić im odbieranie fokusu z klawiatury) i użyj, custom JavaScriptaby wyłączyć ich funkcjonalność.

i custom JavaScriptpokazano w sekcji 1

Poniżej kod wyłączonych linków:

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

innym bardzo prostym rozwiązaniem jest:

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

Pierwsze rozwiązanie jest skuteczne.