deshabilitar - html a tag disabled link

¿Cómo deshabilitar un enlace usando solo CSS?

Question

¿Hay alguna manera de deshabilitar un enlace usando CSS?

Tengo una clase llamada current-page y deseo que se deshabiliten los enlaces con esta clase para que no se produzca ninguna acción cuando se hace clic en ellos.

Answer 1

La propiedad puntero-eventos permite el control sobre cómo los elementos HTML responden a los eventos del mouse / táctil, incluyendo el estado activo / activo de CSS, los eventos de clic / toque en Javascript, y si el cursor está visible o no.

Esa no es la única forma de deshabilitar un enlace , sino una buena forma de CSS que funciona en IE10 + y en todos los navegadores nuevos:

.current-page {
  pointer-events: none;
  color: grey;
}

<a href="#" class="current-page">This link is disabled</a>

Answer 2

Bootstrap Enlace desactivado

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Bootstrap Botón desactivado pero parece un enlace

<button type="button" class="btn btn-link">Link</button>

Answer 3

Busqué en internet y no encontré nada mejor que this . Básicamente, para deshabilitar la funcionalidad de hacer clic con el botón, simplemente agregue el estilo CSS usando jQuery así:

$("#myLink").css({ ''pointer-events'': ''none'' });

Entonces para habilitarlo de nuevo haz esto.

$("#myLink").css({ ''pointer-events'': '''' });

Comprobado en Firefox e IE 11, funcionó.

Answer 4

CSS no puede hacer eso. CSS es sólo para presentación. Sus opciones son:

• No incluya el atributo href en sus etiquetas <a> .
• Use JavaScript, para encontrar los elementos de anclaje con esa class , y elimine sus atributos href u onclick consecuencia. jQuery te ayudaría con eso (NickF mostró cómo hacer algo similar pero mejor).

Answer 5

CSS solo puede ser usado para cambiar el estilo de algo. Lo mejor que podrías hacer con CSS puro es ocultar el enlace por completo.

Lo que realmente necesitas es un javascript. Así es como harías lo que quieres usando la biblioteca jQuery.

$(''a.current-page'').click(function() { return false; });

Answer 6

Es posible hacerlo en CSS.

.disabled{
  cursor:default;
  pointer-events:none;
  text-decoration:none;
  color:black;
}

<a href="https://www.google.com" target="_blank" class="disabled">Google</a>

Ver en

Tenga en cuenta que el text-decoration: none; y color: black; no es necesario, pero hace que el enlace se vea más como texto sin formato.

Answer 7

Gracias a todos los que publicaron soluciones, combiné varios enfoques para proporcionar algunas funcionalidades más avanzadas con disabled . Aquí hay una esencia , y el código está abajo.

This provides for multiple levels of defense so that Anchors marked as disable actually behave as such.
Using this approach, you get an anchor that you cannot:
  - click
  - tab to and hit return
  - tabbing to it will move focus to the next focusable element
  - it is aware if the anchor is subsequently enabled


1.  Include this css, as it is the first line of defense.  This assumes the selector you use is ''a.disabled''
    a.disabled {
      pointer-events: none;
      cursor: default;
    }

 2. Next, instantiate this class such as (with optional selector):
    $ ->
      new AnchorDisabler()

Aquí está la clase de coffescript:

class AnchorDisabler
  constructor: (selector = ''a.disabled'') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

  isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass(''disabled'')
    return true if target.attr(''disabled'') is ''disabled''
    return false

  onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)

    focusables = $('':focusable'')
    return unless focusables

    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

    next.focus() if next


  onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  onKeyup: (ev) =>

    # 13 is the js key code for Enter, we are only interested in disabling that so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13

    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

Answer 8

La única forma de hacer esto sin CSS sería establecer un CSS en un div de envoltura que hiciera que desaparezca y que otra cosa tome su lugar.

P.EJ:

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

Con un CSS como

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

Para desactivar la A, deberá reemplazar el evento click o href, como lo describen otros.

PD: Solo para aclarar, consideraría esto como una solución bastante desordenada, y para SEO tampoco es la mejor, pero creo que es la mejor con solo CSS.

Answer 9

La respuesta ya está en los comentarios de la pregunta. Para mayor visibilidad, estoy copiando css-tricks.com/pointer-events-current-nav aquí:

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

<a href="link.html" class="not-active">Link</a>

Para obtener soporte para el navegador, consulte https://caniuse.com/#feat=pointer-events . Si necesitas soportar IE hay una solución alternativa; ver esta respuesta

Advertencia: el uso de pointer-events de pointer-events en CSS para elementos que no son SVG es experimental. La característica solía ser parte de la especificación preliminar de CSS3 UI pero, debido a muchos problemas abiertos, se ha pospuesto a CSS4.

Answer 10

Prueba esto:

<style>
.btn-disable {
    display:inline-block;
    pointer-events: none;       
}
</style>

Answer 11

Puede configurar el atributo href en javascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}

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

Answer 12

Puedes usar este css:

a.button,button {
    display: inline-block;
    padding: 6px 15px;
    margin: 5px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    -moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    -webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    box-shadow: inset 0 3px 20px 0 #cdcdcd;
}

a[disabled].button,button[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
    -webkit-touch-callout: none;
}

a.button:active:not([disabled]),button:active:not([disabled]) {
    background-color: transparent !important;
    color: #2a2a2a !important;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
}

<button disabled="disabled">disabled!</button>
<button>click me!</button>
<a href="http://royansoft.com" disabled="disabled" class="button">test</a>
<a href="http://royansoft.com" class="button">test2</a>

Answer 13

Si desea mantener solo HTML / CSS en un formulario, otra opción es usar un botón. Estilo y establecer el atributo disabled .

Por ejemplo, http://jsfiddle.net/cFTxH/1/

Answer 14

Si desea que sea solo CSS, la lógica de desactivación debe definirse mediante CSS.

Para mover la lógica en las definiciones de CSS, tendrás que usar selectores de atributos. Aquí hay unos ejemplos :

Deshabilitar enlace que tiene un href exacto: =

Puede elegir deshabilitar los enlaces que contienen un valor href específico como:

<a href="//website.com/exact/path">Exact path</a>

[href="//website.com/exact/path"]{
  pointer-events: none;
}

Deshabilite un enlace que contiene un fragmento de ruta: *=

Aquí, cualquier enlace que contenga /keyword/ in path será deshabilitado

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

Deshabilita un enlace que comienza con: ^=

el operador [attribute^=value] apunta un atributo que comienza con un valor específico. Le permite descartar sitios web y rutas de raíz.

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

Incluso puedes usarlo para deshabilitar enlaces que no sean https. Por ejemplo :

a:not([href^="https://"]){
  pointer-events: none;
}

Deshabilita un enlace que termina con: $=

El operador [attribute$=value] apunta un atributo que termina con un valor específico. Puede ser útil descartar extensiones de archivo.

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

O cualquier otro atributo.

Css puede apuntar a cualquier atributo HTML. Podría ser rel , target , data-custom etc.

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

Combinando selectores de atributos

Puedes encadenar múltiples reglas. Digamos que desea deshabilitar todos los enlaces externos, pero no los que apuntan a su sitio web:

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

O deshabilite los enlaces a archivos pdf de un sitio web específico:

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

Soporte del navegador

Los selectores de atributos son compatibles desde IE7. :not() selector desde IE9.

Answer 15

Solía:

.current-page a:hover {
pointer-events: none !important;
}

Y no fue suficiente; en algunos navegadores todavía mostraba el enlace, parpadeando.

Tuve que añadir:

.current-page a {
cursor: text !important;
}

Answer 16

También puede dimensionar otro elemento para que cubra los enlaces (utilizando el índice z correcto): Eso "comerá" los clics.

(Descubrimos esto por accidente porque tuvimos un problema con los enlaces repentinamente inactivos debido al diseño "sensible" que causó que un H2 los cubriera cuando la ventana del navegador tenía el tamaño de un dispositivo móvil).

Answer 17

pointer-events:none deshabilitará el enlace:

.disabled {
       pointer-events:none;
}
<a href="#" class="disabled">link</a>

Answer 18

Demo aquí
Prueba este

$(''html'').on(''click'', ''a.Link'', function(event){
    event.preventDefault();
});

Answer 19

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

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

Answer 20

<a href="#!">1) Link With Non-directed url</a><br><br>

<a href="#!" disabled >2) Link With with disable url</a><br><br>