Come disabilito un collegamento href in JavaScript?

Ho un tag <a href="#"> Previous </a> 1 2 3 4 <a href="#"> Next </a>e in alcune condizioni voglio che questo tag sia completamente disabilitato.

Codice dai commenti (è così che viene generato il collegamento)

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

Prova questo quando non vuoi che l'utente reindirizzi al clic

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

puoi disattivare tutti i link in una pagina con questa classe di stile:

a {
    pointer-events:none;
}

ora ovviamente il trucco è disattivare i link solo quando serve, ecco come farlo:

usa una classe A vuota, come questa:

a {}

quindi quando vuoi disattivare i link, fai questo:

    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
    }

NOTA: i nomi delle regole CSS vengono trasformati in minuscolo in alcuni browser e questo codice fa distinzione tra maiuscole e minuscole, quindi è meglio usare nomi di classe minuscoli per questo

per riattivare i collegamenti:

GetStyleClass('a').pointerEvents = ""

controlla questa pagina http://caniuse.com/pointer-events per informazioni sulla compatibilità del browser

Penso che questo sia il modo migliore per farlo, ma purtroppo IE, come sempre, non lo permetterà :) Lo sto comunque postando, perché penso che contenga informazioni che possono essere utili e perché alcuni progetti usano un browser noto , come quando utilizzi le visualizzazioni web su dispositivi mobili.

se vuoi solo disattivare UN link (mi rendo conto solo che era QUELLA la domanda), userei una funzione che imposta manualmente l'URL della pagina corrente, oppure no, in base a quella condizione. (come la soluzione che hai accettato)

questa domanda è stata MOLTO più facile di quanto pensassi :)

Puoi semplicemente dargli un hash vuoto:

anchor.href = "#";

o se questo non è abbastanza buono come "disabilitazione", usa un gestore di eventi:

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

Prova questo usando 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);

Trovo questo modo più facile da implementare. E ha il vantaggio che tu js. Non è all'interno del tuo html ma in un file diverso. Penso che senza lo scioglimento. Entrambi gli eventi sono ancora attivi. Non sono sicuro. Ma in un certo senso hai solo bisogno di questo evento

MDN consiglia di element.removeAttribute(attrName);impostare l'attributo su null (o un altro valore) quando si desidera disabilitarlo. In questo caso lo sarebbeelement.removeAttribute("href");

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

Il modo più semplice per disabilitare un collegamento è semplicemente non mostrarlo. Esegui questa funzione ogni volta che desideri verificare se la tua condizione è soddisfatta per nascondere il pulsante Precedente (sostituisci if (true)con la tua condizione):

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

Quindi esegui testHideNav()ogni volta che devi controllare se la tua condizione è cambiata.

Utilizza invece uno span e un javascript onclick. Alcuni browser "saltano" se si dispone di un collegamento e "#" href.

Anche questo è possibile:

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

Il collegamento non va da nessuna parte poiché la tua funzione verrà eseguita.

Avevo un'esigenza simile, ma la mia motivazione era quella di evitare che il collegamento venisse fatto doppio clic. L'ho realizzato usando jQuery:

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

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

L'HTML ha questo aspetto:

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

Quindi le soluzioni di cui sopra fanno sì che il collegamento non funzioni, ma non rendono visibile (AFAICT) che il collegamento non è più valido. Ho una situazione in cui ho una serie di pagine e voglio disabilitare (e rendere ovvio che è disabilitato) il collegamento che punta alla pagina corrente.

Così:

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

Questo passa attraverso l'elenco dei collegamenti, trova quello che punta alla pagina corrente (n_root3 potrebbe essere una cosa locale, ma immagino documentdebba avere qualcosa di simile) e sostituisce il collegamento con il contenuto del testo del collegamento.

HTH

Grazie a tutti...

Il mio problema è stato risolto dal codice seguente:

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

Installa questo plugin per jquery e usalo

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

Ti consente di disabilitare / abilitare praticamente qualsiasi campo nella pagina.

Se vuoi aprire una pagina in qualche condizione scrivi una funzione java script e chiamala da href. Se la condizione è soddisfatta, apri la pagina, altrimenti non fare nulla.

il codice ha questo aspetto:

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

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

Puoi anche inserire il link in un div e impostare la proprietà di visualizzazione dell'attributo Style su none. questo nasconderà il div. Ad esempio,

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

Questo nasconderà il collegamento. Usa un pulsante o un'immagine per rendere visibile questo div ora chiamando questa funzione in onclick come:

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

and write the js code as:

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

Puoi anche inserire un tag id al tag html, quindi sarebbe

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

E ottieni questo ID sul tuo javascript usando

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

Uno di questi deve funzionare di sicuro haha

Un altro metodo per disabilitare il collegamento

element.removeAttribute('href');

il tag di ancoraggio senza href reagirebbe come testo disabilitato / normale

<a> w/o href </a>

invece di <a href="#"> with href </a>

vedi jsFiddel

spero che questo sia utile.

Invece di void puoi anche usare:

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

0) è meglio che ti ricordi che alcuni browser "saltano" se hai un link e "#" href. Quindi il modo migliore sarebbe un JavaScript personalizzato

1) Se dopo il JavaScript personalizzato , eccolo:

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

Il "return false" impedisce che il collegamento venga effettivamente seguito.

2) Puoi considerare di evitare di utilizzare quanto segue

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

o

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

Perché lo pseudo-protocollo javascript può mettere la pagina in uno stato di attesa in alcuni browser, il che può avere conseguenze impreviste. IE6 è noto per questo. Ma se non ti interessa IE6 e stai testando tutto, potrebbe essere una buona soluzione.

3) Se lo hai già jQuerye bootstrapnel tuo progetto, puoi provare a usarli in questo modo:

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

dove la .disabledclasse viene dal bootstrap.

Qupte form bootstrap site ( qui )

Avvertenza sulla funzionalità dei collegamenti

La classe .disabled pointer-events: nonetenta di disabilitare la funzionalità di collegamento di s, ma quella proprietà CSS non è ancora standardizzata. Inoltre, anche nei browser che supportano gli eventi del puntatore: nessuno, la navigazione da tastiera rimane inalterata, il che significa che gli utenti vedenti della tastiera e gli utenti di tecnologie assistive saranno comunque in grado di attivare questi collegamenti. Quindi, per sicurezza, aggiungi un tabindex="-1"attributo a questi collegamenti (per impedire loro di ricevere il focus della tastiera) e usalo custom JavaScriptper disabilitare la loro funzionalità.

e il è custom JavaScriptstato mostrato nella sezione 1

Di seguito il codice per i link disabilitati:

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

un'altra soluzione molto semplice è:

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

La prima soluzione è efficiente.