Href-Tag deaktiviert

Obwohl dieser Link deaktiviert ist, kann er weiterhin angeklickt werden.

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

Kann ich es nicht anklickbar machen, wenn es deaktiviert ist? Sollte ich unbedingt JavaScript verwenden?

Es gibt kein deaktiviertes Attribut für Hyperlinks. Wenn Sie nicht möchten, dass etwas verknüpft wird, müssen Sie das <a>Tag vollständig entfernen oder sein hrefAttribut entfernen .

Mit Hilfe von CSS deaktivieren Sie den Hyperlink. Versuchen Sie das Folgende

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

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

Sie können verwenden:

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

Sie können eine dieser Lösungen verwenden:

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>

Versuche dies:

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

Das <a>Tag hat kein disabledAttribut, das ist nur für <input>s (und <select>s und <textarea>s).

Um einen Link zu "deaktivieren", können Sie sein hrefAttribut entfernen oder einen Klick-Handler hinzufügen, der false zurückgibt.

Sie müssen das <a>Tag entfernen , um dies zu beseitigen .

oder versuchen Sie es mit: -

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

Tipps 1: Verwenden von CSS pointer-events: none;

Tipps 2: Verwenden von JavaScript javascript:void(0) (Dies ist eine bewährte Methode)

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

Tipps 1: Verwenden von Jquery $('selector').attr("disabled","disabled");

Nur CSS: Dadurch wird der Link aus dem entfernt href.

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

Wenn Sie ein Elternteil haben, pointer-events: nonewird das Kind a-tagwie folgt deaktiviert (erfordert, dass das div das a abdeckt und nicht 0 Breite / Höhe hat):

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

wo:

.disabled {
    pointer-events: none;
}

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

Mit diesem Code können Sie die Verknüpfung mithilfe von Javascript zur Laufzeit deaktivieren

$ ('. page-link'). css ("Zeigerereignisse", "keine");

Wenn Sie den Zeiger entfernen möchten, können Sie dies mit CSS mithilfe des Cursors tun .

Sie können das deaktivierte Attribut für ein <a>Tag emulieren .

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

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

In meinem Fall benutze ich

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

Ich habe eine:

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

Hoffe es wird dir helfen;)

Wir können es nicht direkt deaktivieren, aber wir können Folgendes tun

1. hinzufügen type="button".
2. Entfernen Sie das href=""Attribut.
3. disabledFügen Sie ein Attribut hinzu , damit angezeigt wird, dass es durch Ändern des Coursers deaktiviert und abgeblendet wird.

Das Folgende ist ein Beispiel

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

Ich konnte das gewünschte Ergebnis mit einer ng-href-ternären Operation erzielen

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

wo

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

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

Verwenden Sie Schaltflächen und Links richtig.

• Schaltflächen aktivieren die Skriptfunktionalität auf einer Webseite (Dialoge, Bereiche erweitern / reduzieren).

• Links führen Sie zu einem anderen Ort, entweder zu einer anderen Seite oder zu einem anderen Ort auf derselben Seite.

Wenn Sie diese Regeln befolgen, gibt es kein Szenario, in dem Sie einen Link deaktivieren müssen. Auch wenn Sie einen Link visuell deaktiviert und leer anklicken lassen

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

Sie werden die Barrierefreiheit nicht in Betracht ziehen und Screenreader werden sie als Link lesen und sehbehinderte Menschen werden sich immer wieder fragen, warum der Link nicht funktioniert.

Wenn Sie WordPress verwenden, habe ich ein Plugin erstellt, das dies und vieles mehr kann, ohne wissen zu müssen, wie man etwas codiert. Sie müssen lediglich den Selektor der Links hinzufügen, die Sie deaktivieren möchten, und dann "Alle Links mit diesem Selektor in einem neuen Tab deaktivieren" auswählen. Klicken Sie im angezeigten Dropdown-Menü auf Aktualisieren.

Klicken Sie hier, um ein GIF anzuzeigen, das dies demonstriert

Sie können die kostenlose Version aus dem WordPress.org Plugin-Repository herunterladen , um sie auszuprobieren.

Es gibt verschiedene Möglichkeiten, das a-Tag zu deaktivieren:

<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

Da es keine deaktivierten Attribute für das Ankertag gibt. Wenn Sie das Verhalten von Ankertags innerhalb einer jQuery-Funktion stoppen möchten, können Sie die folgende Zeile am Anfang der Funktion verwenden:

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

event.preventDefault ()

Ich sehe, dass hier bereits eine Menge Antworten veröffentlicht wurden, aber ich glaube, es gibt noch keine eindeutigen, die die bereits erwähnten Ansätze mit denen kombinieren, die ich für richtig befunden habe. Dies dient dazu, den Link deaktiviert anzuzeigen und den Benutzer nicht auf eine andere Seite umzuleiten.

Diese Antwort setzt voraus, dass Sie jquery und bootstrap verwenden , und verwendet eine andere Eigenschaft, um die hrefEigenschaft vorübergehend zu speichern, während sie deaktiviert ist.

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

Alles im href- Tag wird unten links im Browserfenster angezeigt, wenn Sie mit der Maus darüber fahren.

Ich persönlich finde es schrecklich , wenn dem Benutzer so etwas wie Javascript: void (0) angezeigt wird.

Lassen Sie stattdessen href aus, zaubern Sie mit jQuery / was auch immer und fügen Sie eine Stilregel hinzu (falls Sie sie noch benötigen, um wie ein Link auszusehen):

a {
    cursor:pointer;
}

Die beste Antwort ist immer die einfachste. Keine Codierung erforderlich.

Wenn das (a) Ankertag kein href-Attribut hat, ist es nur ein Platzhalter für einen Hyperlink. Unterstützt von allen Browsern!

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

Sie können Ankertags deaktivieren, indem Sie false zurückgeben. In meinem Fall verwende ich eckig und ng-deaktiviert für ein Jquery-Akkordeon und muss die Abschnitte deaktivieren.

Also habe ich ein kleines js-Snippet erstellt, um dies zu beheben.

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

Wenn Sie den Link nur vorübergehend deaktivieren möchten, aber die href dort lassen, um sie später zu aktivieren (was ich tun wollte), habe ich festgestellt, dass alle Browser die erste href verwenden. Daher konnte ich tun:

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

Variante, die zu mir passt:

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

Nur hinzufügen: Dies funktioniert im Allgemeinen, funktioniert jedoch nicht, wenn der Benutzer Javascript im Browser deaktiviert hat.

1) Sie können optional die Bootstrap 3-Klasse für Ihr Ankertag verwenden, um das href-Tag zu deaktivieren, nachdem Sie das Bootstrap 3-Plugin do integriert haben

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

Oder

2) Erfahren Sie, wie Sie Javascript mithilfe von HTML oder JS in Browsern aktivieren. oder erstellen Sie ein Popup, in dem Sie dem Benutzer mitteilen, dass er Javascript aktivieren soll, bevor Sie die Website verwenden