J'ai écrit une page Web dans laquelle les liens sont tous contenus dans leurs propres balises. Je leur ai également fait tous les styles de bouton avec CSS (bordure, couleur de fond, rembourrage). Comment puis-je activer l'ensemble du DIV pour activer le lien?Comment rendre une section DIV cliquable?
La meilleure façon de faire ce genre d'effet (faire des liens agissent comme des boutons) est d'appliquer css aux liens eux-mêmes. Voici un exemple de base:
a.mylink {
display: block;
padding: 10px;
width: 200px;
background-color: #000;
color: #fff;
}
Testez-le - l'ensemble du bouton est cliquable. Et il respecte les actions de lien de navigateur normal comme un clic droit, informations d'état url, etc.
Ce qui pourrait être nouveau pour certaines personnes est d'ajouter le "display: block" au lien. Les DIV sont par défaut le niveau "block", les liens sont "inline". Si vous voulez qu'un élément en ligne agisse comme un div (et d'autres éléments de bloc), donnez-lui simplement un "display: block" comme ci-dessus. –
Merci. J'étais sur le point de poser une question que votre commentaire m'a montré comment réparer! – chustar
Cela ne fonctionnera pas si la div que vous voulez rendre clickable contient d'autres divs car vous ne pouvez pas incorporer divs à l'intérieur de tags. – Head
Je pense que vous avez dû écrire CSS pour vos balises "a", au lieu de mettre vos liens dans les divs et les divs tunning avec CSS.
Voici l'exemple de la barre latérale:
<!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>
Vous pouvez le voir en action ici: http://bazanov.net/sidebar
Je voulais que l'ensemble soit cliquable, le texte et la zone autour du texte. – chustar
Avec du CSS pur, il est généralement réalisé en utilisant CSS pour les balises «a» et pour les balises à l'intérieur des balises «a». J'ai oublié la solution javascript, cependant, comme J-P a commenté, l'utilisateur ne saura pas si DIV est un lien et est cliquable. – nightcoder
PS. Et le tout serait cliquable avec du CSS pur. Vous avez juste besoin d'accorder vos balises "a" et interne "span". – nightcoder
je me suis dit comment faire. Dans la balise, créez une propriété onclick puis dans cette propriété, définissez window.location = (où vous voulez aller). Comme dans:
<DIV OnClick="window.location='http://stackoverflow.com'">
Content
</DIV>
Très mauvaise pratique! Comment exactement l'utilisateur saura-t-il que le DIV est un lien? Les ancres reçoivent un tas d'améliorations comportementales supplémentaires de la part des navigateurs - l'élément DIV ne sera en aucun cas amélioré. C'est vraiment un cas d'utilisabilité, ou un manque de convivialité! – James
bien sûr, je vais avoir d'autres indices. Ils ressemblent à des boutons, et quand ils passent la souris, je place le curseur pour passer à la sélection thingy. C'est juste pour montrer la solution que j'ai trouvée le problème que j'avais. – chustar
Regardez l'exemple publié par Lance McNearney. C'est exactement ce que vous cherchiez et il ne nécessite pas de javascript. – slosd
En utilisant jQuery vous pouvez faire quelque chose de semblable à ce que chustar suggéré:
$(div#name).click(function(){
window.location = $('a:first', this).attr('href');
}).hover(function() {$(this).addClass('hovered')},
function() {$(this).removeClass('hovered')});
Habituellement, cela se fait dans l'une des manières suivantes:
<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;
}
Maintenant toute la div est cliquable.
En utilisant Javascript, c'est aussi très facile, cela utilise jQuery pour easyness, mais vous pouvez très facilement le faire sans jQuery (si vous ne l'utilisez pas déjà).
$('.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.
Je recommande fortement de mettre un lien effectif dans la DIV comme non javascript utilisateur ne sera pas en mesure d'utiliser le lien s'il n'y a pas de lien réel dans la DIV.
C'est très bien mais cela ne montre pas l'URL dans la barre d'état lorsque vous passez la souris dessus. – Head
Essayez ceci:
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
Pour faire une cliquable div. mettre une étiquette à l'intérieur et l'afficher comme un élément de bloc et lui donner la même largeur et hauteur que la div je le fais tout le temps.
Un code serait utile ... Cela dépend vraiment de ce que vous voulez dire et comment vous voulez le gérer. – tvanfosson