javascript - example - jquery link href

Evita saltar a la ventana al hacer clic en#-links

Question

Tengo una página con algunas preguntas y respuestas, las respuestas se contraen de forma predeterminada. Cuando hacen clic en la pregunta, amplío el answer-div oculto. El problema es que cuando hago clic en estas preguntas, la ventana salta a la parte superior de la pantalla. Este no es un gran problema, pero lo encuentro molesto, porque tengo que volver a la pregunta otra vez.

Los enlaces simplemente se ve así:

<a href="#" id="myID">Myquestion</a>

Y he usado jQuery y .click como oyente de eventos.

¿Hay alguna forma sencilla de evitar esto, o tengo que usar .scroll y encontrar las coordenadas de la pregunta? Prefiero evitar esto.

EDIT: Sé que puedo usar anclas para hacer esto, pero me gustaría evitar cualquier salto de la pantalla en absoluto.

Answer 1

Dentro de su función de:

And I''ve used jQuery and .click as event-listener.

Se verá algo así como:

$("#myID").click(function(){});

Cambie esto a (no olvide el parámetro e dentro de la function(e) :

$("#myID").click(function(e){
e.preventDefault();
});

Answer 2

Ejemplo con buen desplazamiento para responder contenido:

$("#question_title").click(function(){
var $answer=$("#answer");
$answer.slideDown();
$.scrollTo( $answer, 800 );
return false;
});

Estoy usado jQuery scrollTo plugin.

Answer 3

En realidad, la forma más sencilla de hacerlo es eliminar el atributo href de su etiqueta de anclaje. A partir de HTML5, las etiquetas de anclaje no necesitan incluir atributos href para que sean semánticas.

Asi que

<a id="myID">Myquestion</a>

en lugar de

<a href="#" id="myID">Myquestion</a>

Esto funciona en IE8 +, Chrome y Firefox. Tenga en cuenta que: los estilos de enlace css no se aplicarán a las etiquetas de anclaje que no incluyen atributos href.

Si necesita el atributo href y / o compatibilidad con IE7, entonces

$("#myID").click(function(e) {
if(e.preventDefault)
e.preventDefault();
else
e.stop();
});

Es probablemente la mejor manera de ir.

Answer 4

Está buscando event.preventDefault (consulte la API de jQuery ).

$(...).click(function(e) {
e.preventDefault();
// your code
});

Answer 5

No utilice etiquetas A para tareas que no estén relacionadas con la navegación. No es un marcado semántico, y no se degrada con gracia. Utilice botones en su lugar.

Answer 6

Puedes hacerlo de manera muy simple: ¡solo agrega ! al final de tu href :

<a href="#!" id="myID">Myquestion</a>

Las formas alternativas de jQuery son:

$("#myID").click(function(e) {
e.preventDefault(); // one way
return false; // second way prevent default click action from happening
});

Answer 7

Si agrega un "/" al "#", evitará que suba a la parte superior.

<a href="#/" id="myID">Myquestion</a>

Answer 8

$(''body'').on(''click'', ''[href^=#]'', function (e) { e.preventDefault() });

si el selector ej. "cuerpo" está ahí durante el procesamiento inicial, use cualquier selector ... id ... para apuntar al general para que jQuery (a partir de 1.8.2) se repita. el "En el controlador invoca un método llamado" vinculación "que se usa para el contenido recién agregado al DOM". El uso de "[href ^ = #] seleccionará cualquier href que esté en la etiqueta de la sección, pero puede reemplazar la sección con cualquier cosa o nada y aplica una cancelación al evento de clic. Esta técnica es excelente para el contenido creado dinámicamente en el DOM

Answer 9

preventDefault() agregar preventDefault() a su controlador de clics. Esto evitará que el navegador ejecute su propio controlador de enlaces y solo ejecutará el código que usted especifique.

Ejemplo:

$("#myID").click(function(e) {
e.preventDefault();
// Do your stuff
});

Answer 10

HTML:

<a id="like-post" href="#/">like</a>

JavaScript:

$(''body'').delegate(''#like-post'',''click'',function(e) {
e.preventDefault();
.....
});

Answer 11

$("#myID").click(function(e) {
if(e.preventDefault)
e.preventDefault();
else
e.stop();
});

e.preventDefault() solo no funcionó en versiones anteriores de IE.

Answer 12

$(''a'').click( function() {
if ($(this).attr("href") == window.location.hash) {
event.preventDefault()
}
});