css - tag - Haz un div en un enlace

html structure template

Question

Tengo un bloque <div> con algún contenido visual sofisticado que no quiero cambiar. Quiero que sea un enlace seleccionable.

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

Answer 1

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

Answer 2

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

pero hay una manera difícil 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 toda el área del ancho (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 div, por ejemplo:

height:60px;

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

Esto es realmente complicado y simple, y se crea con código CSS.

Aquí hay un example : example

Answer 3

Esta es la forma más sencilla.

Digamos, este es el bloque div que quiero hacer clic:

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

Así que ponga un href siguiente manera:

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

Simplemente considere el bloque div como un elemento html normal y habilite la etiqueta habitual href .
Funciona en FF al menos.

Answer 4

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

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

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

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

Answer 5

Esta es una pregunta antigua, pero pensé que la respondería 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, entonces me disculpo ...

Answer 6

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

<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 tener una etiqueta <a> como elemento de nivel de bloque.

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

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

Answer 7

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 */
}

Tal como se propone en http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/

Answer 8

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>

Answer 9

Este trabajo para mí:

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

Answer 10

Introduje una variable porque algunos valores de mi enlace cambiarán según el registro del usuario. Esto funcionó para la prueba:

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

y esto funciona también:

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

Answer 11

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:

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

Ahora puedes estilizar el div como quieras. Y también debe crear el estilo para el comportamiento de "enlace":

CSS:
-------------
[data-link] {
cursor: pointer;
}

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

JAVASCRIPT:
-------------
$(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 se encuentra en el atributo de enlace de datos.

Answer 12

Mis pantalones inteligentes responden:

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

Simplemente use HTML5 DOCTYPE DTD ".

En realidad no es cierto para ie7

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

Funciona IE7-9, Chrome, Safari, Firefox,

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

Answer 14

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

a {
display: block;
}

A continuación, puede establecer el ancho y la altura en él.

Answer 15

Para que la respuesta del usuario funcione en IE 7 y adelante, necesita algunos ajustes.

1. IE no respetará el índice z si el elemento no tiene ningún color de fondo, por lo que el enlace no se superpondrá en las partes del div contenedor que tiene 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 completamente cuando se usa el intervalo en un enfoque de enlace. Sin embargo, si al enlace se le da 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>

Answer 16

Puede hacer que el elemento esté rodeado de etiquetas href o puede usar jquery y usar

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

Answer 17

Puedes dar un enlace a tu 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>

Answer 18

Requiere un poco de javascript. Pero, tu div se podría hacer clic.

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

Answer 19

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

En primer lugar, entendamos por qué sucede esto: IE no hace que se pueda hacer clic en un div vacío, solo hace 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 ocúltela del espectador.

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

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

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

Answer 20

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

<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 vez más, no haría esto, así que por favor no me voten. Simplemente estoy tratando de responder la pregunta.

Answer 21

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 piensa un poco fuera de la caja ;-)

Answer 22

Solo tienes que tener el enlace en el bloque y mejorarlo con jQuery. Se degrada 100% con gracia para cualquier persona sin javascript. Hacer esto con html no es realmente la mejor solució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 que se pueda hacer clic en el bloque (a través de la pared 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, aplique estos estilos solo si javascript está habilitado agregando una clase ''js_enabled'' al div, o al cuerpo, o lo que sea.

Answer 23

También puede intentar envolviendo un ancla, luego girando su altura y anchura para que sea igual con su padre. Esto funciona perfectamente para mí.

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

Answer 24

Vine aquí con la esperanza de encontrar una solución mejor que la mía, pero no me gusta ninguna de las que se ofrecen aquí. Creo que algunos de ustedes han malinterpretado 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 miras, en realidad son marcas adecuadas.

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

En esencia es esto:

• Construye tu panel usando técnicas CSS normales y HTML válido.
• En algún lugar de allí, ponga 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 de intervalo vacía ( <span></span> , no <span /> - gracias @Campey)
• dar la posición del panel: relativo

• Aplicar 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 etiqueta <A> , es un enlace en el que se puede hacer clic

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