¿Cómo se hace una etiqueta div en un enlace?

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

JS:

content

jQuery:

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

Asegúrese de usar cursor:pointer para estos DIV

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: block.

Como tal:

  

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

Si está utilizando HTML5, como se señaló en esta otra pregunta, puede poner su div dentro de a :

 
Some content here

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

NO LO HAGAS

  • Si desea un enlace, ajuste el contenido en el NCHOR adecuado NCHOR .
  • Si desea convertir el

    en un enlace, use “Javascript” para ajustar el

    dentro de un NCHOR

  • Si desea realizar alguna acción al hacer clic en

    use el controlador de eventos onclick … y no lo llame un “enlace”.

¿Entonces quieres 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 eso, 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 puede tener un acto

como un enlace sin usar un enlace (o equivalente, como un

que solo contiene un botón de envío) o usar JavaScript.

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

Dicho todo 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 lo suficientemente simple. Escuche un evento de clic y cambie la ubicación:

No hagas esto

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

Puede hacer que toda la función DIV sea un enlace añadiendo un clic en “ventana.localización = ‘URL OBJETIVO'” y configurando su estilo en “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 tabs 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.

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

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

Esta solución tiene la clara ventaja de mantener la lógica no en su marcado.

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.