javascript - pueden - dieta sin azucar menu

Evite que el enlace href="#" cambie el hash URL

Question

Tengo un sitio que ya aprovecha el hash en la URL y no quiero que se modifique. Cuando uso Zurb Foundation y uso href="#" para el elemento del menú, al hacer clic en él se elimina el valor hash anterior.

¿Cómo puedo anular este comportamiento?

Actualización: creo que es mejor quedarse con el elemento porque cuando lo cambio, cambia el estilo que está vinculado a ese elemento HTML. Siempre prefiero usarlo con un marco de diseño para mantenerme con las convenciones predeterminadas y no utilizar los atributos css de anulación.

Gracias.

Answer 1

En lugar de tener # en href, puede usar javascript:; en href que no permitirá que la url cambie.

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

Answer 2

En lugar de usar "#", use "javascript: void (0)". Consulte este enlace para obtener más información. ¿Qué valor de "href" debo usar para los enlaces de JavaScript, "#" o "javascript: void (0)"?

Answer 3

Esto funciona para mí

$(document).on(''click'', ''a'', function (e) {
    if ($(this).attr(''href'') == ''#'') {
        e.preventDefault();
    }
});

Answer 4

He hecho lo siguiente para evitar que todas las etiquetas con atributo href = "#" realicen navegación (usando JQuery):

$(''a[href$="#"]'').click(function (event) {
            event.preventDefault ? event.preventDefault() : event.returnValue = false;

        });

Answer 5

La forma más fácil de hacerlo es <a href="#hash" onclick="event.preventDefault();"></a>

Answer 6

Lea sobre Mejora progresiva y JavaScript discreto .

Deberías (casi) nunca tener href="#" . Es un enlace a un ancla no definida (que será la parte superior de la página). Las personas que lo usan normalmente lo hacen porque quieren colgar JavaScript de él.

Si va a tener un enlace, entonces debe apuntar a algún lugar útil. Normalmente, esta será otra página que utiliza tecnología del lado del servidor para obtener el mismo efecto (aunque menos rápidamente) que el JavaScript. Luego puede evitar el comportamiento normal del enlace.

Por ejemplo:

<a href="/foo/bar" class="whatever">Foo: Bar</a>

Con el guion:

addEventListener(''click'', function (ev) {
    if (ev.target.classList.contains(''whatever'')) {
        ev.preventDefault();
        loadWithAjax(ev.target.href);
    }   
});

Si el JavaScript hace algo que no puede tener una funcionalidad equivalente expresada en un enlace, entonces no debería usar un enlace en primer lugar. Use un <button> y considere seriamente agregarlo al documento usando JavaScript / DOM en lugar de HTML.

(NB: Mucha gente quiere apoyar navegadores más antiguos que no reconocen classList o addEventListener comprueban el soporte del navegador y la búsqueda de rutinas de compatibilidad se deja como un ejercicio para el lector. Usar YUI, jQuery o similar es un enfoque para lidiar con la compatibilidad .)

Answer 7

Lo elegí muy recientemente, pero traté de eliminar el atributo href completo de la etiqueta y funcionó bien. insinuado de

<a href="#" onclick="something"></a>
    use 
<a onclick="something"></a>

Answer 8

Mi solución es un poco lo mismo, usando Javascript:

-> Reemplazar

<a href=#foo class="ouvrir">Newsletter</a>

por:

<a href="javascript://" class="ouvrir">Newsletter</a>

Y el Javascript:

<script>
    $(''.ouvrir'').click(function(event){
        window.location.href = "#foo";
        history.pushState('''', document.title, window.location.pathname);
    });
</script>

Answer 9

Puede escuchar el evento click y llamar a preventDefault para que el navegador no configure el hash.

Ejemplo con jQuery:

$(''.mylink'').click(function(event){
    event.preventDefault();
});

Answer 10

Simplemente usa esto:

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

Answer 11

Tenga el código siguiente en su biblioteca predeterminada.
Esto tomará el valor href en el evento click y si se encuentra el valor hash (#), entonces evitará el evento predeterminado que evitará redirigir al valor href.

$(document).on(''click'', ''a'', function (e) {
    if ($(''#''+e.target.id).attr(''href'')==''#'') {
        e.preventDefault();
    }
});