Wie deaktiviere ich einen href-Link in JavaScript?

Ich habe ein Tag <a href="#"> Previous </a> 1 2 3 4 <a href="#"> Next </a>und möchte unter bestimmten Umständen, dass dieses Tag vollständig deaktiviert wird.

Code aus Kommentaren (so wird der Link generiert)

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

Versuchen Sie dies, wenn der Benutzer beim Klicken nicht umleiten soll

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

Sie können alle Links auf einer Seite mit dieser Stilklasse deaktivieren:

a {
    pointer-events:none;
}

Jetzt besteht der Trick natürlich darin, die Links nur dann zu deaktivieren, wenn Sie dies benötigen. So geht's:

Verwenden Sie eine leere A-Klasse wie folgt:

a {}

Wenn Sie dann die Links deaktivieren möchten, gehen Sie folgendermaßen vor:

    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
    }

HINWEIS: CSS-Regelnamen werden in einigen Browsern in Kleinbuchstaben umgewandelt. Bei diesem Code wird zwischen Groß- und Kleinschreibung unterschieden. Verwenden Sie daher besser Klassennamen in Kleinbuchstaben

Links reaktivieren:

GetStyleClass('a').pointerEvents = ""

Informationen zur Browserkompatibilität finden Sie auf dieser Seite unter http://caniuse.com/pointer-events

Ich denke, dies ist der beste Weg, dies zu tun, aber leider wird der IE es wie immer nicht zulassen :) Ich poste dies trotzdem, weil ich denke, dass dies Informationen enthält, die nützlich sein können, und weil einige Projekte einen bekannten Browser verwenden B. wenn Sie Webansichten auf Mobilgeräten verwenden.

Wenn Sie nur EINEN Link deaktivieren möchten (ich weiß nur, dass dies die Frage war), würde ich eine Funktion verwenden, die die URL der aktuellen Seite basierend auf dieser Bedingung manuell festlegt oder nicht. (wie die Lösung, die Sie akzeptiert haben)

Diese Frage war viel einfacher als ich dachte :)

Sie können ihm einfach einen leeren Hash geben:

anchor.href = "#";

oder wenn das nicht gut genug für eine "Deaktivierung" ist, verwenden Sie einen Ereignishandler:

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

Versuchen Sie dies mit 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);

Ich finde diesen Weg einfacher zu implementieren. Und es hat den Vorteil, dass Sie js. Befindet sich nicht in Ihrem HTML, sondern in einer anderen Datei. Ich denke das ohne das Unbinden. Beide Ereignisse sind noch aktiv. Nicht sicher. Aber in gewisser Weise brauchen Sie nur dieses eine Ereignis

Der einfachste Weg, einen Link zu deaktivieren, besteht darin, ihn einfach nicht anzuzeigen. Führen Sie diese Funktion aus, wenn Sie testen möchten, ob Ihre Bedingung erfüllt ist, um die Schaltfläche Zurück auszublenden (durch if (true)Ihre Bedingung ersetzen ):

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

Führen testHideNav()Sie dann aus, wann immer Sie überprüfen müssen, ob sich Ihr Zustand geändert hat.

MDN empfiehlt element.removeAttribute(attrName);, das Attribut nicht auf null (oder einen anderen Wert) zu setzen, wenn Sie es deaktivieren möchten. In diesem Fall wäre eselement.removeAttribute("href");

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

Verwenden Sie stattdessen einen Span- und einen Javascript-Klick. Einige Browser "springen", wenn Sie einen Link und "#" href haben.

Dies ist auch möglich:

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

Link geht nirgendwo hin, indem Ihre Funktion ausgeführt wird.

Ich hatte ein ähnliches Bedürfnis, aber meine Motivation war es, zu verhindern, dass der Link doppelt angeklickt wird. Ich habe es mit jQuery geschafft:

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

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

Der HTML-Code sieht folgendermaßen aus:

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

Die oben genannten Lösungen führen dazu, dass der Link nicht funktioniert, machen jedoch nicht sichtbar (AFAICT), dass der Link nicht mehr gültig ist. Ich habe eine Situation, in der ich eine Reihe von Seiten habe und den Link, der auf die aktuelle Seite verweist, deaktivieren (und deutlich machen möchte, dass er deaktiviert ist).

So:

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

Dies geht durch die Liste der Links, findet diejenige, die auf die aktuelle Seite verweist (n_root3 ist möglicherweise eine lokale Sache, aber ich stelle mir vor, documentdass sie etwas Ähnliches haben muss) und ersetzt den Link durch den Inhalt des Linktextes.

HTH

Danke euch allen...

Mein Problem wurde durch den folgenden Code gelöst:

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

Installieren Sie dieses Plugin für jquery und verwenden Sie es

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

Sie können so ziemlich jedes Feld auf der Seite deaktivieren / aktivieren.

Wenn Sie eine Seite unter bestimmten Bedingungen öffnen möchten, schreiben Sie eine Java-Skriptfunktion und rufen Sie sie von href aus auf. Wenn die Bedingung erfüllt ist, öffnen Sie die Seite, sonst tun Sie einfach nichts.

Code sieht so aus:

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

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

Sie können den Link auch in ein div einfügen und die Anzeigeeigenschaft des Style-Attributs auf none setzen. Dies wird die Div verbergen. Zum Beispiel

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

Dadurch wird der Link ausgeblendet. Verwenden Sie eine Schaltfläche oder ein Bild, um dieses Div jetzt sichtbar zu machen, indem Sie diese Funktion in onclick wie folgt aufrufen:

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

and write the js code as:

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

Sie können dem HTML-Tag auch ein ID-Tag hinzufügen

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

Und erhalten Sie diese ID in Ihrem Javascript mit

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

Eines davon muss auf jeden Fall funktionieren, haha

Eine andere Methode zum Deaktivieren der Verknüpfung

element.removeAttribute('href');

Ankertag ohne href würde als deaktivierter / einfacher Text reagieren

<a> w/o href </a>

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

siehe jsFiddel

hoffe, das ist hilfreich.

Anstelle von void können Sie auch Folgendes verwenden:

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

0) Sie sollten sich besser daran erinnern, dass einige Browser "springen", wenn Sie einen Link und "#" href haben. Der beste Weg wäre also ein benutzerdefiniertes JavaScript

1) Wenn Sie nach dem benutzerdefinierten JavaScript , hier ist es:

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

Die "return false" verhindert, dass der Link tatsächlich verfolgt wird.

2) Sie können Folgendes vermeiden

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

oder

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

Weil das Javascript-Pseudoprotokoll die Seite in einigen Browsern in einen Wartezustand versetzen kann, was unerwartete Folgen haben kann. IE6 ist dafür bekannt. Aber wenn Sie sich nicht für IE6 interessieren und alles testen, ist dies möglicherweise eine gute Lösung.

3) Wenn Sie bereits jQueryund bootstrapin Ihrem Projekt haben, können Sie die Verwendung folgendermaßen prüfen:

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

Wo .disabledKlasse kommt von Bootstrap.

Qupte Form Bootstrap Site ( hier )

Einschränkung der Link-Funktionalität

Die .disabled-Klasse pointer-events: noneversucht zu versuchen, die Link-Funktionalität von s zu deaktivieren, aber diese CSS-Eigenschaft ist noch nicht standardisiert. Selbst in Browsern, die Zeigerereignisse unterstützen: keine, bleibt die Tastaturnavigation unberührt, sodass sehende Tastaturbenutzer und Benutzer unterstützender Technologien diese Links weiterhin aktivieren können. Fügen Sie tabindex="-1"diesen Links aus Sicherheitsgründen ein Attribut hinzu (um zu verhindern, dass sie den Tastaturfokus erhalten) und custom JavaScriptdeaktivieren Sie deren Funktionalität.

und das custom JavaScriptwurde in Abschnitt 1 gezeigt

Unten Code für deaktivierte Links:

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

Eine andere sehr einfache Lösung ist:

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

Die erste Lösung ist effizient.