página - href html ejemplos

HTML: ¿cómo hacer que un DIV completo sea un hipervínculo?

Question

Esta pregunta ya tiene una respuesta aquí:

• Haz un div en un enlace 24 respuestas

¿Cómo puedo hacer que un DIV completo sea un hipervínculo cliqueable? Es decir, esencialmente quiero hacer:

<div class="myclass" href="example.com">
    <div>...</div>
    <table><tr>..</tr></table>
    ....
</div>

Y cada vez que alguien pasa el mouse sobre el DIV myclass, quiero que todo el DIV sea ​​un hipervínculo en el que se pueda hacer clic.

Answer 1

Puede agregar el onclick para JavaScript en el div.

<div onclick="location.href=''newurl.html'';">&nbsp;</div>

EDITAR: para una nueva ventana

<div onclick="window.open(''newurl.html'',''mywindow'');" style="cursor: pointer;">&nbsp;</div>

Answer 2

Agregue un onclick a su etiqueta DIV .

http://webdevjunk.com/coding/javascript/3/use-onclick-to-make-entire-div-or-other-html-object-into-a-link/

Answer 3

Puede poner un elemento <a> dentro de <div> y configurarlo para display: block y height: 100% .

Answer 4

alternativa sería javascript y reenvío a través del evento onclick

<div onclick="window.location.href=''somewhere...'';">...</div>

Answer 5

Solo necesita especificar el cursor como un puntero, no como una mano, ya que el puntero ahora es el estándar, entonces, aquí está el código de página de ejemplo:

<div onclick="location.href=''portable-display-stands.html'';" id="smallbox">The content of the div here</div>

y el ejemplo CSS:

#smallbox {
    cursor: pointer;
}

Entonces el div ahora es un elemento seleccionable usando ''onclick'' y has falsificado el cursor de mano con el CSS ... ¡el trabajo hecho, funciona para mí!

Answer 6

Esta es una respuesta tardía, pero esta pregunta aparece muy bien en los resultados de búsqueda, por lo que vale la pena responderla correctamente.

Básicamente, no deberías tratar de hacer un clic de div, sino crear un ancla tipo div dando a la etiqueta <a> una display: block el atributo CSS.

De esta forma, su HTML permanece semánticamente válido y puede heredar los comportamientos típicos del navegador para hipervínculos. También funciona incluso si javascript está deshabilitado / los recursos js no se cargan.

Answer 7

¿Por qué no haces esto?

<a href="yoururl.html"><div>...</div></a>

Eso debería funcionar bien y hará que cambie el cursor del "elemento en el que se puede hacer clic", lo que no hará la solución antes mencionada.