Tengo un sitio que ya tiene la ventaja de que el hash de la URL y no quiero cambiar. Cuando yo uso Zurb Foundation y el uso href="#" para el elemento de menú, haga clic en elimina el anterior valor de hash.

¿Cómo puedo anular este comportamiento?

Actualización: creo que es mejor quedarse con el elemento, porque cuando yo cambio, cambia el estilo que está enlazado a ese elemento HTML. Yo siempre prefiero cuando se utiliza con un marco de diseño para quedarse con el valor de los convenios y no de la masa primordiales atributos css.

gracias.

  • Acabo de seguir el Zurb Foundation docs y uso href=»#» en el elemento de menú enlaces
  • Voy a hacer una nota de no confiar en Zurb entonces.
  • usted puede dejar el campo vacío, que todavía es válida
  • Podrías pegar el menú html? ¿Cuál es el punto de un menú que no hace nada?
  • Sí, ha evento onclick en cada uno <a> – agregué.

11 Comentarios

  1. 27

    Por favor, lea Mejora Progresiva y JavaScript No Obstructivo.

    Usted en caso de que (casi) nunca han href="#". Es un enlace a un indefinido de anclaje (que será la parte superior de la página). Las personas que la utilizan, normalmente, lo hacen porque quieren cuelgan de JavaScript fuera de ella.

    Si usted va a tener un enlace, entonces se debe apuntar a algo útil. Típicamente, esto será otra página que utiliza la tecnología del lado servidor para obtener el mismo efecto (aunque menos rápidamente) como el JavaScript daría. Usted puede prevenir el comportamiento normal del enlace.

    Por ejemplo:

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

    Con la secuencia de comandos:

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

    Si el JavaScript que hace algo que no puede tener una funcionalidad equivalente expresado en un enlace, entonces usted no debería estar usando un enlace en el primer lugar. El uso de un <button>, y considerar seriamente la posibilidad de agregar al documento utilizando JavaScript/DOM en lugar de HTML.

    (NB: un buen montón de gente quiere compatible con navegadores antiguos que no reconocen classList o addEventListener comprobación de la compatibilidad del navegador y la búsqueda de la compatibilidad de las rutinas se deja como ejercicio para el lector. El uso de YUI, jQuery o similar es una aproximación para tratar con la compatibilidad).

    • Gracias. Se utilizar <a> para el estilo. Si me la quita, cambia el estilo y por lo tanto prefiero quedarme con su código de convenios (foundation.zurb.com/docs/components/dropdown.html) en lugar de masa alrededor con css
    • y considerar seriamente la posibilidad de agregar al documento utilizando JavaScript/DOM en lugar de HTML, ¿por Qué?
    • Para no terminar con un control de interfaz de usuario que no hace nada si el JS no se puede cargar.
    • A veces tienes que utilizar <a> como para los elementos de menú en un menú desplegable con Espectro de CSS, y sin la href el cursor no cambia a pointer — supongo que se podría reemplazar el estilo, pero caray…
    • Mirando el ejemplo de enlace a … aquellos que están destinados a ser vínculos regulares, con href atributos que contienen útil Url. Que no se debe usar href="#" (el código en el ejemplo, pero sólo como un marcador de posición), así que mi respuesta gradas.
  2. 42

    Usted puede escuchar al evento click y llamar a preventDefault para detener el navegador desde el establecimiento del hash.

    Ejemplo con jQuery:

    $('.mylink').click(function(event){
        event.preventDefault();
    });
    • también puede return false, que es la abreviatura de ambos event.preventDefault y event.stopPropagation
  3. 32

    Lugar de tener # en el href, puede utilizar javascript:; en el href, que no permitirá el cambio de url.

    <a href="javascript:;">:Link</a>
    • En vez de hacer esto, uno debe preferir el uso de un elemento de botón.
    • Como he dicho anteriormente, tengo que usar <a> debido a que la fundación tenía un estilo que se le atribuye y prefiero trabajar con su estilo y las convenciones del código. (foundation.zurb.com/docs/components/dropdown.html)
  4. 10

    Simplemente utilizar este:

    <a href="javascript:void()">text</a>
    • A veces no se puede evitar el uso de # destino. Por ejemplo, al usar la base de los componentes (fichas).
  5. 5

    Esto funciona para mí.

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

    He hecho lo siguiente para prevenir todas las etiquetas con href=»#» atributo realizar la exploración (con JQuery):

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

    Tiene a continuación el código en la biblioteca por defecto.
    Se trata href valor en el evento click y si hash (#) valor encontrado, a continuación, se evitará que el evento predeterminado que va a evitar redirigir a href valor.

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

    Mi solución es un poco el 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>
  9. -2

    Lo tomé muy recientemente, pero traté de extracción de atributo href completa de la etiqueta y funcionó bien.
    en lugar de

    <a href="#" onclick="something"></a>
        use 
    <a onclick="something"></a>
    • Ahora el <a> elemento no es un enlace, para que no sea tratado como ser interactivo. Los lectores de pantalla no se informe de que es algo que se puede hacer clic en. Las personas que navegar a través del documento de ciclismo de elementos interactivos (por ejemplo, pulsando la tecla tab en el teclado) no será capaz de alcanzar el elemento.
    • Bien estos son casos especiales, puede ser tratada como ser interactivo añadiendo la siguiente clase [onclick], [onClick] { cursor: pointer;}, Pero sí tab no funciona.

Dejar respuesta

Please enter your comment!
Please enter your name here