Cómo se hace una etiqueta div en un enlace

Question

Cómo se hace una etiqueta div en un enlace. Me gustaría que se pueda hacer clic en todo mi div.

Answer 1

<div style="cursor:pointer;" onclick="document.location='http://www.google.com'">Foo</div> 

Answer 2

JS:

<div onclick="location.href='url'">content</div> 

jQuery:

$("div").click(function(){ 
    window.location=$(this).find("a").attr("href"); return false; 
}); 

Asegúrese de utilizar cursor:pointer para estos DIVs

Answer 3

Usted puede hacer toda la función DIV como un vínculo mediante la adición de una onclick = "window.location = 'TARGET URL'" y configurando su estilo a "cursor: puntero". Pero a menudo es una mala idea hacer esto porque los motores de búsqueda no podrán seguir el enlace resultante, los lectores no podrán abrir en pestañas o copiar la ubicación del enlace, etc. En su lugar, puedes crear una etiqueta de anclaje normal y luego configure su estilo para mostrar: bloquear, y luego ajústelo como lo haría con un DIV.

Answer 4

<div style="cursor:pointer" onclick="document.location='http://www.google.com'">Content Goes Here</div> 

Answer 5

DO NOT DO IT.

• Si desea un enlace, envuelva el contenido en el buen <A>NCHOR</a>.
• Si desea activar el <DIV> en un enlace, utilice "Javascript" para envolver el <DIV> dentro de un <A>NCHOR</A>
• Si desea realizar alguna acción al hacer clic en el <DIV> utilizar el manejador de eventos onclick ... y don' t lo llaman un "enlace".

Answer 6

Puede usar Javascript para lograr este efecto. Si usa un marco, este tipo de cosas se vuelve bastante simple. Aquí está un ejemplo en jQuery:

$('div#id').click(function (e) { 
    // Do whatever you want 
}); 

Esta solución tiene la ventaja de mantener la lógica no en su margen de beneficio.

Answer 7

Si tiene que establecer su etiqueta de anclaje dentro del div, también puede usar CSS para configurar el anclaje para llenar el div mediante display: bloque.

Como tal:

<div style="height: 80px"><a href="#" style="display: block">Text</a></div> 

Ahora, cuando el usuario flota el cursor en ese div la etiqueta de anclaje llenará el div.

Answer 8

Si está utilizando HTML5, como se señaló en this other pregunta, usted puede poner su div dentro a:

<a href="http://www.google.com"><div>Some content here</div></a> 

preffer este método, ya que deja claro en su estructura que todo el contenido se puede hacer clic, y hacia dónde apunta.

Answer 9

¿Desea que un elemento sea algo que no es?

En general, esto no es una buena idea. Si necesita un enlace, use un enlace. La mayoría de las veces es más fácil usar el marcado adecuado en el lugar al que pertenece.

Dicho todo esto, a veces solo tienes que romper las reglas. Ahora, la pregunta no tiene javascript, así que voy a poner el descargo de responsabilidad aquí:

No se puede tener un acto <div> como un enlace sin ya sea usando un enlace (o equivalente, como un <form> que solo contiene un botón de enviar) o usando JavaScript.

A partir de ahora, esta respuesta asumirá que JavaScript está permitido, y que jQuery está siendo utilizado (por brevedad de ejemplo).

Dicho esto, profundicemos en lo que hace que un enlace sea un enlace.

---

Los enlaces generalmente son elementos en los que hace clic para que lo guíen a un documento nuevo.

Parece bastante simple. Escuchar para un evento de clic y cambiar la ubicación:

_{No haga esto}

$('.link').on('click', function() { 
 
    window.location = 'http://example.com'; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="link">Fake Link</div>

Ahí lo tienes, el <div> es ahora un enlace. Espera ... ¿qué es eso? ¿Qué hay de la accesibilidad? Ah, claro, los lectores de pantalla y los usuarios de tecnología de asistencia no podrán hacer clic en el enlace, especialmente si solo usan el teclado.

de fijación que es bastante simple, vamos a permitir que el teclado sólo a los usuarios centrarse la <div>, y desencadenar el evento click cuando presionan Introduzca:

_{No hacer esto ya sea}

$('.link').on({ 
 
    'click': function() { 
 
    window.location = 'http://example.com'; 
 
    }, 
 
    'keydown': function (e) { 
 
    if (e.which === 13) { 
 
     $(this).trigger('click'); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="link" tabindex="0">Fake Link</div>

Nuevamente, ahí lo tiene, este <div> ahora es un enlace. ¿Espera otra vez? ¿Aún problemas de accesibilidad? Oh, vale, resulta que la tecnología de asistencia no sabe que el <div> es un enlace todavía, por lo que aunque se puede acceder a través del teclado, a los usuarios no se les dice qué hacer con él.

Afortunadamente, hay un atributo que se puede utilizar para anular la función predeterminada de un elemento HTML, para que los lectores de pantalla y similares sepan categorizar elementos personalizados, como nuestro <div> aquí. El atributo es, por supuesto, el atributo [role], y muy bien dice a los lectores de pantalla que nuestra <div> es un enlace:

_{Uf, esto se está poniendo peor cada minuto}

$('[role="link"]').on({ 
 
    'click': function() { 
 
    window.location = 'http://example.com'; 
 
    }, 
 
    'keydown': function (e) { 
 
    if (e.which === 13) { 
 
     $(this).trigger('click'); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div role="link" tabindex="0">Fake Link</div>

último , nuestro <div> es un lin --- oh ahora los otros desarrolladores se están quejando. ¿Ahora que?

Ok, a los desarrolladores no les gusta el código. Intentaron preventDefault en el evento, y simplemente sigue funcionando. Eso es fácil de solucionar:

_{me advirtió que esto era malo}

$(document).on({ 
 
    'click': function (e) { 
 
    if (!e.isDefaultPrevented()) { 
 
     window.location = 'http://example.com'; 
 
    } 
 
    }, 
 
    'keydown': function (e) { 
 
    if (e.which === 13 && !e.isDefaultPrevented()) { 
 
     $(this).trigger('click'); 
 
    } 
 
    } 
 
}, '[role="link"]'); 
 

 
$('[aria-disabled="true"]').on('click', function (e) { 
 
    e.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div role="link" tabindex="0">Fake Link</div> 
 
<div role="link" aria-disabled="true" tabindex="0">Fake disabled link</div>

No lo tenemos --- ¿Hay más? ¿Qué más no sé? Dime todo AHORA para que pueda arreglarlo!

• Bien, entonces no hay forma de especificar el objetivo. Podemos arreglar eso actualizando a window.open.
• Haga clic en eventos y eventos de teclado Ctrl están ignorando ,Alt, Shift y llaves. Eso es bastante fácil, solo necesita verificar esos valores en el objeto del evento.
• No hay forma de especificar datos contextuales. Agreguemos algunos atributos [data-*], y llámenos un día con eso.
• El evento click no obedece al botón del mouse que se está utilizando, el mouse del medio debe abrirse en una nueva pestaña, el mouse derecho no debería estar activando el evento. Lo suficientemente fácil, simplemente agregue algunos controles más a los oyentes del evento.
• Los estilos se ven raros. BIEN POR SUPUESTO, LOS ESTILOS SON EXTRAÑOS, ¡ES UN <DIV> NO UN ANCLAJE!

bueno, abordaré los primeros cuatro problemas, y NO MÁS. Lo he tenido con esta estúpida basura de elementos personalizados. Debería haber usado un elemento <a> desde el principio.

_{lo dije}

$(document).on({ 
 
    'click': function (e) { 
 
    var target, 
 
     href; 
 
    if (!e.isDefaultPrevented() && (e.which === 1 || e.which === 2)) { 
 
     target = $(this).data('target') || '_self'; 
 
     href = $(this).data('href'); 
 
     if (e.ctrlKey || e.shiftKey || e.which === 2) { 
 
     target = '_blank'; //close enough 
 
     } 
 
     open(href, target); 
 
    } 
 
    }, 
 
    'keydown': function (e) { 
 
    if (e.which === 13 && !e.isDefaultPrevented()) { 
 
     $(this).trigger({ 
 
     type: 'click', 
 
     ctrlKey: e.ctrlKey, 
 
     altKey: e.altKey, 
 
     shiftKey: e.shiftKey 
 
     }); 
 
    } 
 
    } 
 
}, '[role="link"]'); 
 

 
$('[aria-disabled="true"]').on('click', function (e) { 
 
    e.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div role="link" tabindex="0" data-href="http://example.com/">Fake Link</div> 
 
<div role="link" tabindex="0" data-href="http://example.com/" data-target="_blank">Fake Link With Target</div> 
 
<div role="link" aria-disabled="true" tabindex="0" data-href="http://example.com/">Fake disabled link</div>

_{Tenga en cuenta que la pila de fragmentos no se abrirán las ventanas emergentes debido a la forma en que está aislado.}

Eso es todo. Ese es el final de este agujero de conejo. Todo eso locura cuando podría tener simplemente tenía:

<a href="http://example.com/"> 
    ...your markup here... 
</a> 

El código que he publicado aquí probablemente tiene problemas. Probablemente tiene errores que incluso yo no me doy cuenta hasta el momento. Intentar duplicar lo que los navegadores te dan gratis es difícil. Hay tantos matices que es fácil pasar por alto que simplemente no vale la pena tratar de emularlo el 99% del tiempo.

Answer 10

Tenga en cuenta que las arañas de búsqueda no indexan el código JS. Entonces, si coloca su URL dentro del código JS, asegúrese de incluirla también en un enlace HTML tradicional en otro lugar de la página. Es decir, si desea que las páginas vinculadas sean indexadas por Google, etc.