Convertir un div en un enlace


545

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.


79
una buena razón sería una imagen de fondo en el div
Simon_Weaver

1
Tengo un buen ejemplo de trabajo basado en la respuesta más votada. Mira el violín aquí
Mike

77
En HTML5 es perfectamente válido tener un divbajo un a.
Juan A. Navarro

Respuestas:


739

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

11
Gracias funciona bien. Si las cosas se rompen horriblemente (como lo hicieron para mí) en IE8, asegúrese de tener una etiqueta de intervalo de apertura y cierre (<span ...> </span>), en lugar de un intervalo vacío (<span ... /> )
Campey

1
El código no funciona completamente en IE7 / 8, otros elementos que son seleccionables tienen prioridad sobre el <a><span></span></a>elemento. Es decir, las imágenes y los textos dentro del contenedor no se vincularán incluso si se establece el índice z.
Spoike

67
Un violín para las personas que son tontas como yo y leyeron mal algo, así que tuve que jugar un poco: jsfiddle.net/hf75B/1
AlexMA

77
¿Has probado esto en IE9? Me gusta este método, y lo estoy usando, pero lo acabo de probar (incluido el violín de @AlexMA) en IE9, y lo que veo es que puedes hacer clic en cualquier parte del div EXCEPTO en el texto. Cuando pasa el cursor sobre el texto, el cursor cambia a un cursor de texto estándar y no hace nada cuando hace clic en el texto. Como los usuarios son propensos a hacer clic en elementos de texto (y cuando los elementos de texto llenan la mayor parte del div), esta solución no se puede usar en IE9. ¿Alguien más ha experimentado esto o tiene una solución?
bigmac

2
¿Alguien sabe cómo: hover css funciona con esta solución? ¿Quizás refiriendo la respuesta puesta en el violín?
nktokyo

252

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.


11
Sin embargo, esto no convierte un 'div' en un enlace. Hace un enlace en un elemento de bloque. Es un poco diferente
jjnguy

1
Esta es la solución de tu problema. Debido a que puede modificar div, puede hacer clic como hipervínculo, pero no puede configurar el cursor (= mano) para que se muestre en todos los navegadores (¡solo IE lo admite!).
Soul_Master

3
jjnguy: ¿Cómo? No me gusta tener mucho contenido en un enlace, pero esto podría ser parte de un menú de navegación o algo así. Un elemento de anclaje (<a>) no necesariamente tiene que ser texto plano, ¿verdad? ¿De qué manera está mal convertirlo en un bloque? Es semánticamente correcto y se puede usar para mostrarlo como desee.
Arve Systad

23
Esta es una solución perfectamente válida para una pregunta vaga. En realidad, PODRÍAS simplemente envolver un elemento de anclaje alrededor de un div, pero eso sería semánticamente incorrecto. (Elemento de bloque dentro del elemento en línea).
Traingamer

3
jjnguy: Esta es una práctica bastante común. No estoy diciendo reemplazar divs con enlaces, pero por el sonido de la pregunta solo quería un bloque en el que pudiera hacer clic como un botón o algo así.
Soviut

72

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


66
Es HTML válido siempre <div>que no contenga ningún contenido interactivo (otros <a>elementos, <button>elementos, etc.).

50
Su ejemplo no es HTML válido - elemento de bloque contenido en un elemento en línea - a menos que esté usando HTML5, lo que ha hecho una excepción para los enlaces.
thepeer

1
Este es un mal ejemplo, porque lo que hace la aetiqueta es tomar todo el texto en divay subrayarlo ... esto puede mitigarse con estilo, pero la respuesta principal es mejor.
Dmitri Nesteruk

2
a #thediv{font-weight:normal;text-decoration:none;}es todo lo que necesitas en cuanto a estilo.
tyjkenn

1
Probé esto y funcionó, sin embargo, rompió el posicionamiento del elemento. Sí, doctype es HTML5 en Chrome (algunas versiones de 2014) ..
BAR

60

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

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

99
Sin embargo, da como resultado una semántica incorrecta en la página, por lo que evitaría esta aunque sea técnicamente posible.
Arve Systad

2
Pensé en usar esta solución, pero es un poco feo. Me gustan las soluciones que involucran visualización: bloquear mejor.
allyourcode

99
Esto parece un enlace, pero no es un enlace real. Tiene graves problemas de usabilidad y accesibilidad, y es una solución realmente desagradable.
WhyNotHugo

2
Mejor solución. Solo necesitamos ejecutar el script y enviarle "esto".
Arman Hayots

3
Si no tienen habilitado js, ​​perdió la funcionalidad. Además de ser malo para el SEO.
BAR

40

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/


1
¡Gracias! La solución de Chris Jumonville funciona muy bien tanto en Andriod como en iPhone. Ejemplo: gastateparks.org/specials
Loren

1
¿No debería ser div.feature > asolo en caso de que la parte "todo lo demás" también contenga un enlace oculto en lo profundo?
TWiStErRob

esta debería ser la respuesta elegida, también funciona con bootstrap
Anthony Kal

23

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.


14

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.


Para obtener información sobre los atributos de datos, consulte: ejohn.org/blog/html-5-data-attributes
Erhard Dinhobl

13

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>


9

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>

8

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>

1
También es posible que desee asegurarse de que el div padre tenga cero relleno y que la etiqueta <a> tenga margen cero.
Nilpo

4

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


No pasará la validación HTML. La línea de pedido no puede almacenar artículos de bloque.
Krzysztof Trzos

Quiero decir, eso <div><span></span></div>es válido y <span><div></div></span>no lo es. No debe poner el display: inline;tipo de elementos en los display: block;elementos. La <a>etiqueta es cuadro en línea.
Krzysztof Trzos

Sí, puede funcionar, porque puedes hacerlo de varias maneras (mejor o peor). Esta solución particular no es buena porque la validación HTML anterior :).
Krzysztof Trzos

1
¿Importa que la "validación HTML anterior" no pase esto? Ahora está permitido, html5 y por una razón, ¿por qué no usarlo? Creo que esta solución está bien (a menudo requiere la eliminación del subrayado del contenido div, pero aún así).
Todilo

@Todilo Porque mientras <a><div></div></a>es válido y funciona, <a><div><a></a></div></a>no es válido y no funciona.
coredumperror

3

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!


¡Gracias! Necesitaba simular un mapa de imagen con anclas vacías sobre una imagen e IE solo te dejaría hacer clic si hubiera contenido. Esto lo solucionó.
MDCore

2

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.


quiero usar esto pero tengo 2 enlaces en el div ... ¿cómo puedo modificarlo para poder hacer clic en ambos enlaces? (actualmente me lleva a "mylink.html" si hago clic en el segundo enlace también ..)
m3tsys

2

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>

2

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".


Trabajó para mi. Simplemente no olvides posicionar relativamente el elemento padre.
Saif Al Falah

1

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/


1

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);
      }
    }
}


0

Este trabajo para mi:

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

0

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>

0

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

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

0

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.


0

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>

3
Nuevamente, esta es una solución funcional, pero no en el espíritu de la pregunta original que era para una solución XHTML. Aunque no es un gran problema, su respuesta no empezar a añadir ruido a la pregunta.
Soviut

0

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>


-1

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> 

1
el código no se muestra por alguna razón. Usé el onclick con una variable jsp dentro para crear un enlace dinámico
Becky

-3

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,


estaba buscando "Estoy buscando una forma válida XHTML 1.1"
Mark

-4

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 ;-)

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.