He escrito una página web en la que todos los enlaces están dentro de sus propias etiquetas. También 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?¿Cómo hacer que se haga clic en una sección DIV?
La mejor manera de hacer este tipo de efecto (haciendo enlaces actúan como botones) es aplicar css a los enlaces mismos. 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 la totalidad del botón. Y respeta las acciones normales de enlace de tu navegador Web como un clic derecho, el estado de información de la URL, etc.
Lo que podría ser nuevo para algunas personas es agregar la "pantalla: bloque" al enlace. Los DIV son de nivel "bloque" por defecto, los enlaces están "en línea". Si quieres que un elemento en línea actúe como un elemento div (y otros elementos del bloque) solo dale un "display: block" como se muestra arriba. –
Gracias. ¡Estaba a punto de hacer una pregunta que tu comentario me mostró cómo solucionarlo! – chustar
Creo que tenía que escribir CSS para sus etiquetas "a", en lugar de poner sus enlaces en divs y afinar los 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>
Usted puede verlo en acción aquí: http://bazanov.net/sidebar
Quería que se pudiera hacer clic en todo, el texto y el área alrededor del texto. – chustar
Con CSS puro, generalmente se logra usando CSS para las etiquetas "a" y para las líneas dentro de las etiquetas "a". Me olvidé de la solución de JavaScript, sin embargo, como comentó J-P, el usuario no sabrá si DIV es un enlace y se puede hacer clic. – nightcoder
PD. Y todo se podría hacer clic con CSS puro. Solo necesita ajustar sus etiquetas "a" e "span" internas. – nightcoder
me di cuenta de cómo hacerlo. En la etiqueta, crea una propiedad onclick y luego en esa propiedad, establece window.location = (donde quieras ir). Como en:
<DIV OnClick="window.location='http://stackoverflow.com'">
Content
</DIV>
¡Muy mala práctica! ¿Cómo sabrá exactamente el usuario que el DIV es un enlace? Los navegadores proporcionan a los anclajes un montón de mejoras de comportamiento extra: el elemento DIV no se mejorará de ninguna manera. ¡Este es realmente un caso de usabilidad, o falta de eso! – James
por supuesto tendré algunas otras sugerencias. Parecen botones, y cuando pasan el mouse, coloco el cursor para cambiar a la opción de selección. Esto es solo para mostrar la solución. Encontré el problema que tenía. – chustar
Mire el ejemplo que Lance McNearney publicó. Eso es exactamente lo que estabas buscando y no requiere javascript. – slosd
Usando jQuery se puede hacer algo similar a lo que chustar sugirieron:
$(div#name).click(function(){
window.location = $('a:first', this).attr('href');
}).hover(function() {$(this).addClass('hovered')},
function() {$(this).removeClass('hovered')});
Por lo general, esto se hace en cualquiera 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 el conjunto div se puede hacer clic.
Usar Javascript esto también es bastante fácil, esto está usando jQuery para simplificar, sin embargo, muy fácilmente podría hacer esto sin jQuery (si 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 una vinculación efectiva en el DIV como no-javascript de usuario no será capaz de utilizar el enlace si no existe un vínculo real en el DIV.
Esto es bastante bueno, pero no muestra la url en la barra de estado cuando se pasa sobre ella. – Head
Prueba esto:
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
Para hacer un div se puede hacer clic. pon una etiqueta dentro de ella y muéstrala como un elemento de bloque y dale el mismo ancho y alto que el div. Lo hago todo el tiempo.
Algún código ayudaría ... Depende exactamente de lo que signifique y cómo quiera manejarlo. – tvanfosson