¿Cómo hacer que una etiqueta de anclaje no se refiera a nada?

Uso jQuery, necesito hacer que algunas etiquetas de anclaje no realicen ninguna acción.

Usualmente lo escribo así:

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

Sin embargo, esto se refiere a la parte superior de la página!

Si no desea que apunte a nada, probablemente no debería usar la <a>etiqueta (ancla).

Si desea que algo se parezca a un enlace pero no que actúe como un enlace, es mejor usar el elemento apropiado (como <span>) y luego aplicarle estilo usando CSS:

<span class="fake-link" id="fake-link-1">Am I a link?</span>

.fake-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

Además, dado que etiquetó esta pregunta como "jQuery", supongo que desea adjuntar un controlador de eventos de clic. Si es así, simplemente haga lo mismo que antes y luego use algo como el siguiente JavaScript:

$('#fake-link-1').click(function() {
    /* put your code here */
});

Hay algunas soluciones menos que perfectas:

1. Enlace a un ancla falsa

<a href="#">

Problema: hacer clic en el enlace vuelve a la parte superior de la página

2. Usando una etiqueta que no sea 'a'

Use una etiqueta span y use jquery para manejar el clic

Problema: rompe la navegación del teclado, tiene que cambiar manualmente el cursor de desplazamiento

3. Enlace a una función vacía de JavaScript

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

Problema: se rompe al vincular imágenes en IE

Solución

Dado que todos estos tienen sus problemas, la solución que he decidido es vincular a un ancla falsa y luego devolver falso desde el método onClick:

<a href="#" onClick="return false;">

No es la solución más concisa, pero resuelve todos los problemas con los métodos anteriores.

Para que no haga nada en absoluto, use esto:

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

La forma correcta de manejar esto es "romper" el enlace con jQuery cuando manejas el enlace

HTML

<a href="#" id="theLink">My Link</a>

JS

$('#theLink').click(function(ev){
    // do whatever you want here

    ev.preventDefault();
    ev.stopPropagation();
});

Esas dos últimas llamadas detienen el navegador que interpreta el clic.

Hay tantas formas de hacerlo como

No agregue y hrefatribuya

<a name="here"> Test <a>

Puede agregar un evento onclick en lugar de href como

<a name="here" onclick="YourFunction()"> Test <a>

O puede agregar una función vacía como esta, que sería la mejor manera

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

¿Qué quieres decir con nada?

<a href='about:blank'>blank page</a>

o

<a href='whatever' onclick='return false;'>won't navigate</a>

Creo que puedes intentar

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

El único inconveniente que veo aquí es que la seguridad del navegador de alto nivel puede solicitar la ejecución de JavaScript.

Aunque esta es una de las formas más fáciles que

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

esto debe usarse con moderación

Lea este artículo para ver algunos consejos https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void

Esta respuesta debe actualizarse para reflejar los nuevos estándares web (HTML5).

Esta:

<a tabindex="0">This represents a placeholder hyperlink</a>

... es válido HTML5. El atributo tabindex hace que el teclado pueda enfocarse como hipervínculos normales. También podría usar el spanelemento para esto como se mencionó anteriormente, pero creo que usar el aelemento es más elegante.

Ver: https://w3c.github.io/html-reference/a.html
y: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href

Estas son las tres formas en que <a>la hrefpropiedad de etiqueta de la etiqueta no se refiere a nada:

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

<a href="javascript:;">link</a >

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

Sé que esta es una vieja pregunta, pero pensé agregar mis dos centavos de todos modos:

Depende de lo que vaya a hacer el enlace, pero por lo general, apuntaría el enlace a una url que posiblemente podría mostrar / hacer lo mismo, por ejemplo, si está haciendo un poco sobre el cuadro emergente:

<a id="about" href="/about">About</a>

Luego con jQuery

$('#about').click(function(e) {
    $('#aboutbox').show();
    e.preventDefault();
});

De esta forma, los navegadores muy antiguos (o navegadores con JavaScript deshabilitado) aún pueden navegar a una página separada por separado, pero lo más importante, Google también recogerá esto y rastreará el contenido de la página acerca de.

Asegúrese de que todos los enlaces que desea detener tengan href="#!"(o lo que quiera, realmente), y luego use esto:

jq('body').on('click.stop_link', 'a[href="#!"]',
function(event) {
     event.preventDefault();
});

Puede tener un ancla HTML ( aetiqueta) sin un hrefatributo. Deje el hrefatributo y no se vinculará a nada:

<a>link</a>

Lo único que funcionó para mí fue una combinación de lo anterior:

Primero el li en el ul

<li><a onclick="LoadTab2_1()" href="JavaScript:void(0)">All Assigned</a></li>

Luego, en LoadTab2_1 cambié manualmente la pestaña divs

$("#tabs-2-1").hide();
    $("#tabs-2-2").show();

Esto se debe a que la desconexión de la también desconecta la acción en las pestañas

También debe hacer manualmente el estilo de la pestaña cuando la pestaña principal cambia las cosas

$("#secTab1").addClass("ui-tabs-active").addClass("ui-state-active").addClass("ui-state-hover").addClass("ui-state-focus");
    $("#secTab1 a").css("color", "#ffffff");

Puedes hacerlo por

<a style='cursor:pointer' >Link</a>

<a href="#" onclick="SomeFunction()"  class="SomeClass">sth.</a>

Esta fue mi etiqueta de anclaje. así que devuelve false en onClick = "" el evento no es útil aquí. Acabo de eliminar la propiedad href = "#" y funcionó para mí como a continuación

<a onclick="SomeFunction()"  class="SomeClass">sth.</a>

y necesitaba agregar este css.

.SomeClass
{
    cursor: pointer;
}

Encontré este problema en un sitio de WordPress. Los encabezados en los menús desplegables siempre tenían el atributo href=""y el complemento de encabezado utilizado solo permitía URL estándar. La solución más fácil era simplemente ejecutar este código en el pie de página:

jQuery('[href=""]').click(function(e){
    e.preventDefault();
});

Esto evitará que las anclas en blanco hagan algo.

Reaccionar ya no admite el uso de una función como esta href="javascript:void(0)"en su etiqueta de anclaje, pero aquí hay algo que funciona bastante bien.

<a href="#" onClick={() => null} >link</a>

Sé que esto está etiquetado como una pregunta jQuery, pero también puede responder esto con AngularJS.

en su elemento, agregue la directiva ng-click y use la variable $ event que es el evento click ... evite su comportamiento predeterminado:

<a href="#" ng-click="$event.preventDefault()">

Incluso puede pasar la variable $ event a una función:

<a href="#" ng-click="doSomething($event)">

en esa función, haces lo que quieras con el evento click.