He escrito una página web en la que todos los enlaces están contenidos dentro de sus propias etiquetas. También los hice todos los estilos de botones con CSS (borde, color de fondo, relleno). ¿Cómo habilito que se haga clic en todo el DIV para activar el enlace?

5
chustar 7 jun. 2009 a las 22:18

7 respuestas

La mejor respuesta

La mejor manera de hacer este tipo de efecto (hacer que los enlaces actúen como botones) es aplicar css a los propios enlaces. Aquí hay un ejemplo básico:

a.mylink {
display: block;
padding: 10px;
width: 200px;
background-color: #000;
color: #fff;
}

Pruébelo: se puede hacer clic en todo el botón. Y respeta las acciones de enlace normales del navegador, como hacer clic con el botón derecho, información de estado de la URL, etc.

17
Lance McNearney 7 jun. 2009 a las 18:53

Prueba esto:

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
1
Tim 15 ene. 2012 a las 11:32

Creo que tenía que escribir CSS para sus etiquetas "a", en lugar de poner sus enlaces en divs y ajustar divs con CSS.

Aquí está el ejemplo de la barra lateral:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

/*********************/
/* SIDEBAR */
/*********************/
#sidebar {
  width: 160px;
  float: left;
  margin-top: 10px;
}

#news {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-size: 1.2em;
  border-top: 1px dashed #294E56;
  border-right: 1px dashed #294E56;
}
#news li {
  display: inline;
}
#news .title {
  font-weight: bold;
  display: block;
  color: #666666;
}
#news a {
  text-decoration: none;
  display: block;
  padding: 5px;
  border-bottom: 1px dashed #294E56;
  color: #73AFB7;
  line-height: 110%;
  background: #FFFFFF url(images/bg/bg_link.png) no-repeat right top;
}
/* hack for IE 6 < to make entire block clickable */
* html #news a {
  height: 1px; 
}

#news a:hover {
  color: #000000;
  background-image: url(images/bg/bg_link_h.png);
}

</style>
</head>
<body>
<div id="sidebar">
<ul id="news">
    <li><a href="#"><span class="title">Virgo: It's Your Month</span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Your Feedback </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">This Month's Survey </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Indoor lawns: sod or seed? </span>Lorem ipsum dolor sit.</a></li>
    <li><a href="#"><span class="title">Lorem Ipsum </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Adipiscing elit </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Euismod tincidunt </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li>
    <li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li>
</ul>
</div>
</body>
</html>

Puedes verlo en acción aqui: http://bazanov.net/sidebar

3
nightcoder 7 jun. 2009 a las 23:45

Descubrí cómo hacerlo. En la etiqueta, cree una propiedad onclick y luego en esa propiedad, establezca window.location = (a dónde desea ir). Como en:

<DIV OnClick="window.location='http://stackoverflow.com'">
    Content
</DIV>
-3
chustar 7 jun. 2009 a las 18:27

Por lo general, esto se realiza de una de las siguientes maneras:

<div class='link_wrapper'>
  <!-- there could be more divs here for styling -->
  <a href='example.com'>GOto Example!</a>
</div>

.link_wrapper{
  somestyles: values;
  height: 20px; /*or whatever*/
  width:auto;
  padding:0px;
}
.link_wrapper a{
  line_height:20px; /*same as .link_wapper*/
  margin:0px;
}

Ahora se puede hacer clic en todo el div.

Usar Javascript también es bastante fácil, esto es usar jQuery para facilitarlo, sin embargo, podría hacerlo fácilmente sin jQuery (si aún no lo usa).

$('.link_wrapper')
  .style('cursor', 'pointer') //very important, indicate to user that div is clickable
  .click( function() {
    window.location = $(this).find('a').attr('href');
  }); //Do click as if user clicked actual text of link.

Recomiendo encarecidamente poner un enlace real en el DIV ya que el usuario que no sea JavaScript no podrá usar el enlace si no hay un enlace real en el DIV.

4
Pim Jager 7 jun. 2009 a las 19:00

Para hacer un div clickable. ponle una etiqueta dentro y muéstralo como un elemento de bloque y dale el mismo ancho y alto que el div. Lo hago todo el tiempo.

1
John Conde 17 nov. 2011 a las 16:17

Usando jQuery puedes hacer algo similar a lo que sugirió chustar:

$(div#name).click(function(){
    window.location = $('a:first', this).attr('href');
}).hover(function() {$(this).addClass('hovered')}, 
   function () {$(this).removeClass('hovered')});
-1
Brian Fisher 7 jun. 2009 a las 18:30