Convertir un div en un enlace

Tengo un <div>bloque con contenido visual sofisticado que no quiero cambiar. Quiero que sea un enlace en el que se pueda hacer clic.

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

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 han entendido mal la pregunta. El OP quiere hacer que un div lleno de contenido se comporte como un enlace. Un ejemplo de esto serían los anuncios de Facebook: si nos fijamos, en realidad son un marcado adecuado.

Para mí, los no-nos son: javascript (no debería ser necesario solo para un enlace, y muy mal SEO / accesibilidad); HTML no válido

En esencia es esto:

• Construya su panel usando técnicas CSS normales y HTML válido.
• En algún lugar, coloque un enlace que desee que sea el enlace predeterminado si el usuario hace clic en el panel (también puede tener otros enlaces).
• Dentro de ese enlace, coloque una etiqueta span vacía ( <span></span>no <span />, gracias @Campey)
• dar la posición del panel: relativo

• aplica el siguiente CSS al espacio vacío:

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

  Ahora cubrirá el panel y, como está dentro de una <A>etiqueta, es un enlace en el que se puede hacer clic

• proporcione cualquier otro enlace dentro de la posición del panel: relativo y un índice z adecuado (> 1) para colocarlos delante del enlace de intervalo predeterminado

No puede hacer divun enlace en sí, pero puede hacer un<a> etiqueta actúe como un block, el mismo comportamiento que <div>tiene.

a {
    display: block;
}

Luego puede establecer el ancho y la altura en él.

Esta es una pregunta antigua, pero pensé en responderla ya que todos aquí tienen algunas soluciones locas. En realidad es muy muy simple ...

Una etiqueta de anclaje funciona así:

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

Sooo ...

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

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

Requiere un pequeño javascript. Pero, tu divsería cliqueable.

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

Esta opción no requiere un empty.gif como en la respuesta más votada:

HTML:

 <div class="feature">
       <a href="http://www.example.com"></a>
 </div>

CSS:

 div.feature {
        position: relative;
    }

    div.feature a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
    }

Según lo propuesto en http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/

Esta es una solución "válida" para lograr lo que desea.

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

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

No recomendaría usar JavaScript para simular un hipervínculo, ya que esto anula el propósito de la validación de marcado, que en última instancia es promover la accesibilidad (la publicación de documentos bien formados siguiendo las reglas semánticas adecuadas minimiza la posibilidad de que el mismo documento sea interpretado de manera diferente por diferentes navegadores).

Sería preferible publicar una página web que no valide, pero que represente y funcione correctamente en todos los navegadores , incluidos los que tienen JavaScript deshabilitado. Además, el uso onclickno proporciona la información semántica para que un lector de pantalla determine que el div funciona como un enlace.

La forma más limpia sería usar jQuery con las etiquetas de datos introducidas en HTML. Con esta solución, puede crear un enlace en cada etiqueta que desee. Primero defina la etiqueta (por ejemplo, div) con una etiqueta de enlace de datos:

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>

Ahora puedes diseñar el div como quieras. Y también debe crear el estilo para el comportamiento similar al "enlace":

[data-link] {
  cursor: pointer;
}

Y por fin pon esta llamada jQuery en la página:

$(document).ready(function() {
  $("[data-link]").click(function() {
    window.location.href = $(this).attr("data-link");
    return false;
  });
});

Con este código, jQuery aplica un detector de clics a cada etiqueta en la página que tiene un atributo de "enlace de datos" y redirige a la URL que está en el atributo de enlace de datos.

No estoy seguro si esto es válido pero funcionó para mí.

El código :

<div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
  <p style='display:inline;color:#ffffff;float:left;'> Whatever </p>     
  <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
</div>

Para que la respuesta de thepeer funcione en IE 7 y en adelante, necesita algunos ajustes.

1. IE no honrará el índice z si el elemento no tiene color de fondo, por lo que el enlace no se superpondrá con partes del div que contiene contenido, solo las partes en blanco. Para solucionar esto, se agrega un fondo con opacidad 0.

2. Por alguna razón, IE7 y varios modos de compatibilidad fallan por completo cuando se usa el span en un enfoque de enlace. Sin embargo, si el enlace en sí tiene el estilo, funciona bien.

.blockLink  
{  
    position:absolute;  
    top:0;  
    left: 0;  
    width:100%;  
    height:100%;  
    z-index: 1;  
    background-color:#ffffff;   
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter: alpha(opacity=0);  
    opacity:0;  
}

<div style="position:relative">  
    <some content>  
    <a href="somepage" class="blockLink" />  
<div>

También puede intentar envolviendo un ancla, luego girando su altura y anchura para que sean las mismas que las de su padre. Esto me funciona perfectamente.

<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>

¿Por qué no? use <a href="bla"> <div></div> </a>funciona bien en HTML5

Esta publicación es antigua, lo sé, pero tuve que solucionar el mismo problema porque simplemente escribir una etiqueta de enlace normal con la pantalla configurada para bloquear no hace que se pueda hacer clic en todo el div en IE. así que para solucionar este problema es mucho más simple que tener que usar JQuery.

En primer lugar, comprendamos por qué sucede esto: IE no hará que se haga clic en un div vacío, solo hará que se pueda hacer clic en el texto / imagen dentro de esa etiqueta div / a.

Solución: Rellene el div con una imagen de fondo y escóndelo del espectador.

¿Cómo? Haces buenas preguntas, ahora escucha. agregue este estilo de fondo a la etiqueta

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

Y ahí lo tienes, ahora se puede hacer clic en todo el div. Esta fue la mejor manera para mí porque lo estoy usando para mi galería de fotos para permitir que el usuario haga clic en la mitad de la imagen para moverse hacia la izquierda / derecha y luego coloque una imagen pequeña también para efectos visuales. ¡así que para mí usé las imágenes izquierda y derecha como imágenes de fondo de todos modos!

Solo tiene el enlace en el bloque y mejórelo con jquery. Se degrada 100% con gracia para cualquier persona sin javascript. Hacer esto con html no es realmente la mejor solución en mi humilde opinión. Por ejemplo:

<div id="div_link">
<h2><a href="mylink.htm">The Link and Headline</a></h2>
<p>Some more stuff and maybe another <a href="mylink.htm">link</a>.</p>
</div>

Luego use jquery para hacer clic en el bloque (a través del muro del diseñador web ):

$(document).ready(function(){

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

});

Entonces todo lo que tienes que hacer es agregar estilos de cursor al div

    #div_link:hover {cursor: pointer;}

Para los puntos de bonificación solo aplique estos estilos si javascript está habilitado agregando una clase 'js_enabled' al div, o al cuerpo, o lo que sea.

Este ejemplo funcionó para mí:

<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>

Esto funcionó para mí:

HTML:

<div>

  WHATEVER YOU WANT

  <a href="YOUR LINK HERE">
    <span class="span-link"></span>
  </a>

</div>

CSS:

.span-link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 9999;
}

Esto agrega un elemento invisible (el intervalo), que cubre todo su div, y está por encima de todo su div en el índice z, por lo que cuando alguien hace clic en ese div, el clic es esencialmente interceptado por su capa invisible "span", que está vinculado.

Nota: Si ya está utilizando índices z para otros elementos, solo asegúrese de que el valor de este índice z sea más alto que cualquier cosa sobre la que desee que descanse "encima".

En realidad, debe incluir el código JavaScript en este momento, consulte este tutorial para hacerlo.

pero hay una forma complicada de lograr esto usando un código CSS: debe anidar una etiqueta de anclaje dentro de su etiqueta div y debe aplicarle esta propiedad,

display:block;

cuando haya hecho eso, hará que se pueda hacer clic en el área de ancho completo (pero dentro de la altura de la etiqueta de anclaje), si desea cubrir toda el área div debe establecer la altura de la etiqueta de anclaje exactamente a la altura de la etiqueta etiqueta div, por ejemplo:

height:60px;

esto hará que se pueda hacer clic en toda el área, luego puede aplicar text-indent:-9999pxa la etiqueta de anclaje para lograr el objetivo.

Esto es realmente complicado y simple y se acaba de crear usando código CSS.

Aquí hay un ejemplo : http://jsfiddle.net/hbirjand/RG8wW/

Esta es la mejor manera de hacerlo como se usa en el sitio web de la BBC y The Guardian:

Encontré la técnica aquí: http://codepen.io/IschaGast/pen/Qjxpxo

aquí está el html

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

aquí está el CSS

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

.block-link a {
  position: relative;
  z-index: 1;
}

.block-link .block-link__overlay-link {
    position: static;
    &:before {
      bottom: 0;
      content: "";
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
    &:hover,
    &:focus {
      &:before {
        background: rgba(255,255,0, .2);
      }
    }
}

<a href="…" style="cursor: pointer;"><div> … </div></a>

Este trabajo para mi:

<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

Puede dar un enlace a su div mediante el siguiente método:

<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
    cursor:pointer;
    width:200px;
    height:200px;
    background-color:#FF0000;
    color:#fff;
    text-align:center;
    font:13px/17px Arial, Helvetica, sans-serif;
    }
</style>

Puede hacer rodear el elemento con etiquetas href o puede usar jquery y usar

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});

Esta es la forma más simple.

Digamos, este es el divbloque que quiero hacer clic:

<div class="inner_headL"></div>

Entonces pon un hrefcomo sigue:

<a href="#">
 <div class="inner_headL"></div>
</a>

Simplemente considere el divbloque como un elemento html normal y habilite la hrefetiqueta habitual .
Funciona en FF al menos.

Si bien no recomiendo hacer esto bajo ninguna circunstancia, aquí hay un código que convierte un DIV en un enlace (nota: este ejemplo usa jQuery y se elimina cierto marcado por simplicidad):

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("div[href]").click(function () {
        window.location = $(this).attr("href");
    });
});

</script>
<div href="http://www.google.com">
     My Div Link
</div>

Una opción que no se ha mencionado es usar flex. Al aplicarlo flex: 1a la aetiqueta, se expande para adaptarse al contenedor.

div {
  height: 100px;
  width: 100px;
  display: flex;
  border: 1px solid;
}

a {
  flex: 1;
}

<div>
  <a href="http://google.co.uk">Link</a>
</div>

Introduje una variable porque algunos valores en mi enlace cambiarán dependiendo de qué registro provenga el usuario. Esto funcionó para probar:

   <div onclick="location.href='page.html';"  style="cursor:pointer;">...</div> 

y esto también funciona:

   <div onclick="location.href='<%=Webpage%>';"  style="cursor:pointer;">...</div> 

Mis pantalones inteligentes responden:

"Respuesta evasiva a:" Cómo hacer que el elemento de nivel de bloque sea un hipervínculo y validarlo en XHTML 1.1 "

Simplemente use HTML5 DOCTYPE DTD ".

En realidad no fue cierto para ie7

onclick="location.href='page.html';"

Funciona IE7-9, Chrome, Safari, Firefox,

si todo pudiera ser así de simple ...

#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}

#logo a {padding-top:48px; display:block;}



<div id="logo"><a href="../../index.html"></a></div>

solo piense un poco fuera de la caja ;-)