530 votos

Hacer que un div en un enlace

Tengo un <div> bloque con algún capricho contenido visual que no quiero cambiar. Quiero dejar un enlace.

Estoy buscando algo como <a href="…"><div> … </div></a>, pero que es válido XHTML 1.1.

725voto

thepeer Puntos 4699

Vine aquí con la esperanza de encontrar una solución mejor que la mía, pero no me gusta ninguno de los que se ofrecen aquí. Creo que algunos de ustedes no han entendido bien la pregunta. El OP quiere hacer un div lleno de contenido se comportan como un enlace. Un ejemplo de esto sería facebook ads - si mire, está en realidad etiquetado adecuado.

Para mí, el no-nos están: javascript (no debería ser necesario sólo para un enlace, y muy mal SEO/accesibilidad); código HTML no válido.

En esencia es esta:

  • Construir su panel de utilizar las técnicas CSS y HTML válido.
  • En algún lugar hay que poner un enlace que quieres ser el enlace por defecto si el usuario hace clic en el panel (puede tener otros vínculos demasiado).
  • Dentro de ese enlace, poner un vacío de la etiqueta span (<span></span>, no <span /> - gracias @Campey)
  • dar el panel de posición:relación
  • aplicar la siguiente regla CSS al vacío abarcan:

    { 
      position:absolute; 
      width:100%;
      height:100%;
      top:0;
      left: 0;
    
      /* edit: added z-index */
      z-index: 1;
    
      /* edit: fixes overlap error in IE7/8, 
         make sure you have an empty gif */
      background-image: url('empty.gif');
    }   
    

    Ahora va a cubrir el panel, y como es en el interior de un <A> etiqueta, es un enlace

  • darle cualquier otro vínculo en el interior del panel de la posición relativa y un adecuado índice z (>1) para ponerlos en frente de la predeterminada span enlace

Edit: se ha quitado el sitio de referencia, como ha cambiado más allá de todo reconocimiento.

249voto

Soviut Puntos 26384

Usted no puede hacer la div un enlace, pero se puede hacer una <a> etiqueta de actuar como block, el mismo comportamiento que un <div> tiene.

a {
    display: block;
}

A continuación, puede establecer la anchura y la altura.

68voto

Zizo47 Puntos 798

Esta es una antigua pregunta, pero he pensado que me gustaría contestar desde aquí todo el mundo tiene algo de loco soluciones. En realidad es muy sencillo...

Una etiqueta de anclaje obras como esta -

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

Sooo...

<a href="whatever you want">n <div id="thediv"></div> </a>

Aunque no estoy seguro de si esto es válido. Si ese es el razonamiento detrás hablado de soluciones, entonces me disculpo...

57voto

jjnguy Puntos 62123

Requiere de un poco de javascript. Pero, su div sería hacer clic.

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

23voto

Calvin Puntos 2800

Este es un "válido" solución para lograr lo que desea.

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

Pero más probable es que lo que realmente se desea es tener un <a> etiqueta muestra como un elemento de nivel de bloque.

Yo no recomendaría el uso de JavaScript para simular un hipervínculo que derrota el propósito de la validación de formato, que es en definitiva el fomento de la accesibilidad (editorial bien formado documentos, de acuerdo con las reglas semánticas minimiza la posibilidad de que el mismo documento podrá ser interpretado de manera diferente por los diferentes navegadores).

Sería preferible para publicar una página web que no valida, pero hace y funciona correctamente en todos los navegadores, incluyendo aquellos con JavaScript deshabilitado. Además, utilizando onclick no proporcionar la información semántica de un lector de pantalla para determinar que el div es que funciona como un enlace.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X