¿Cómo desactivo un enlace href en JavaScript?

Tengo una etiqueta <a href="#"> Previous </a> 1 2 3 4 <a href="#"> Next </a>y, en algunas condiciones, quiero que esta etiqueta esté completamente desactivada.

Código de comentarios (así es como se genera el enlace)

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

Pruebe esto cuando no desee que el usuario redirija al hacer clic

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

puede desactivar todos los enlaces en una página con esta clase de estilo:

a {
    pointer-events:none;
}

ahora, por supuesto, el truco es desactivar los enlaces solo cuando sea necesario, así es como se hace:

use una clase A vacía, como esta:

a {}

luego, cuando desee desactivar los enlaces, haga esto:

    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: Los nombres de las reglas CSS se transforman a minúsculas en algunos navegadores, y este código distingue entre mayúsculas y minúsculas, por lo que es mejor utilizar nombres de clases en minúsculas para esto.

para reactivar enlaces:

GetStyleClass('a').pointerEvents = ""

consulte esta página http://caniuse.com/pointer-events para obtener información sobre la compatibilidad del navegador

Creo que esta es la mejor manera de hacerlo, pero lamentablemente IE, como siempre, no lo permitirá :) Estoy publicando esto de todos modos, porque creo que contiene información que puede ser útil, y porque algunos proyectos usan un navegador conocido. , como cuando usa vistas web en dispositivos móviles.

Si solo desea desactivar UN enlace (solo me doy cuenta de que ESA era la pregunta), usaría una función que establezca manualmente la URL de la página actual, o no, en función de esa condición. (como la solución que aceptó)

esta pregunta fue MUCHO más fácil de lo que pensaba :)

Simplemente puede darle un hash vacío:

anchor.href = "#";

o si eso no es lo suficientemente bueno como "deshabilitar", use un controlador de eventos:

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

Prueba esto 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);

Encuentro esta forma más fácil de implementar. Y tiene la ventaja de que js. No está dentro de su html sino en un archivo diferente. Creo que sin la desvinculación. Ambos eventos siguen activos. No estoy seguro. Pero de alguna manera solo necesitas este evento

MDN recomienda element.removeAttribute(attrName);establecer el atributo en nulo (o algún otro valor) cuando desee deshabilitarlo. En este caso seríaelement.removeAttribute("href");

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

La forma más sencilla de desactivar un enlace es simplemente no mostrarlo. Ejecute esta función siempre que desee probar si se cumple su condición para ocultar el botón Anterior (reemplácelo if (true)con su condición):

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

Luego, ejecute testHideNav()cada vez que necesite hacer la verificación si su condición ha cambiado.

En su lugar, utilice un span y un onclick de JavaScript. Algunos navegadores "saltan" si tiene un enlace y "#" href.

Esto también es posible:

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

El enlace no va a ninguna parte porque se ejecutará su función.

Tenía una necesidad similar, pero mi motivación era evitar que se hiciera doble clic en el enlace. Lo logré usando jQuery:

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

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

El HTML se ve así:

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

Entonces, las soluciones anteriores hacen que el enlace no funcione, pero no hacen visible (AFAICT) que el enlace ya no es válido. Tengo una situación en la que tengo una serie de páginas y quiero deshabilitar (y hacer obvio que está deshabilitado) el enlace que apunta a la página actual.

Entonces:

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

Esto recorre la lista de enlaces, encuentra el que apunta a la página actual (el n_root3 podría ser algo local, pero imagino que documentdebe tener algo similar) y reemplaza el enlace con el contenido del texto del enlace.

HTH

Gracias a todos...

Mi problema resuelto por el siguiente código:

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

Instale este complemento para jquery y úselo

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

Le permite deshabilitar / habilitar prácticamente cualquier campo en la página.

Si desea abrir una página en alguna condición, escriba una función de script java y llámela desde href. Si la condición es satisfactoria, abra la página, de lo contrario, no haga nada.

el código se ve así:

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

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

También puede poner el enlace en un div y establecer la propiedad de visualización del atributo Style en none. esto ocultará el div. Por ejemplo,

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

Esto ocultará el enlace. Use un botón o una imagen para hacer visible este div ahora llamando a esta función en onclick como:

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

and write the js code as:

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

También puede poner una etiqueta de identificación a la etiqueta html, por lo que sería

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

Y obtenga esta identificación en su javascript usando

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

Uno de esto debe funcionar seguro jaja

Otro método para deshabilitar el enlace

element.removeAttribute('href');

La etiqueta de anclaje sin href reaccionaría como texto sin formato / deshabilitado

<a> w/o href </a>

en vez de <a href="#"> with href </a>

ver jsFiddel

Espero que esto sea útil.

En lugar de void también puedes usar:

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

0) es mejor que recuerde que algunos navegadores "saltan" si tiene un enlace y "#" href. Entonces, la mejor manera sería un JavaScript personalizado

1) Si buscas el JavaScript personalizado , aquí está:

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

El "retorno falso" evita que se siga realmente el enlace.

2) Puede considerar evitar usar lo siguiente

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

o

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

Porque el pseudoprotocolo javascript puede poner la página en un estado de espera en algunos navegadores, lo que puede tener consecuencias inesperadas. IE6 es conocido por eso. Pero si no le importa IE6 y está probando todo, puede ser una buena solución.

3) Si ya lo tiene jQueryy bootstrapen su proyecto, puede considerar usarlos así:

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

dónde .disabled clase viene de bootstrap.

Sitio de arranque de formulario Qupte ( aquí )

Advertencia sobre la funcionalidad del enlace

La clase .disabled se usa pointer-events: nonepara intentar deshabilitar la funcionalidad de enlace de s, pero esa propiedad CSS aún no está estandarizada. Además, incluso en los navegadores que admiten eventos de puntero: ninguno, la navegación con el teclado no se ve afectada, lo que significa que los usuarios videntes del teclado y los usuarios de tecnologías de asistencia aún podrán activar estos enlaces. Entonces, para estar seguro, agregue un tabindex="-1"atributo en estos enlaces (para evitar que reciban el enfoque del teclado) y utilícelo custom JavaScriptpara deshabilitar su funcionalidad.

y custom JavaScriptse mostró en la sección 1

A continuación el código para enlaces deshabilitados:

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

otra solución muy simple es:

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

La primera solución es eficiente.