Comment rendre cliquable une <div> ?

Quelle utilité ?

Prenons par exemple le sommaire d'un blog dont le code HTML pourrait ressembler à ça :

<h1>Mon Blog</h1>

<h2>Article 1</h2>
<p>Résumé article 1... <br/>
  <a href=article1.html>Lire la suite</a></p> 

<h2>Article 2</h2>
<p>Résumé article 2...<br/>
  <a href=article2.html>Lire la suite</a></p> 

<h2>Article 3</h2>
<p>Résumé article 3...<br/>
  <a href=article3.html>Lire la suite</a></p>

Cette exemple est volontairement simple. Dans un vrai blog, on trouverait en plus la date, l'auteur, la catégorie ou autres.

Dans cette exemple, il faut cliquer sur Lire la suite pour voir l'article en entier. Pourtant, il serait plus pratique pour l'utilisateur de pouvoir cliquer aussi bien sur le titre ou le résumé pour accéder à l'article.
On pourrait englober le titre et le résumé dans la balise <a> mais selon les recommandations du W3C, la balise <a> est une balise de type inline, elle ne peut donc pas englober de balise de type block comme <h2> ou <p>. Rien ne nous en empêche, mais ce n'est pas ce qu'on appelle une bonne pratique.

Pour rester conforme aux normes du W3C mais améliorer quand même l'expérience utilisateur, on peut faire confiance à jQuery pour nous aider.

Solution avec jQuery

Commencer par appeler le script jQuery dans la partie <head> de votre page HTML.
Comment intégrer jQuery sur une page HTML ?

Ensuite, il faut ajouter un peu de markup dans ce sommaire qui était vraiment minimal. On enveloppe donc chaque résumé d'article dans une balise <div> à laquelle on ajoutera une class CSS.

<div class=summary>
  <h2>Article 1</h2>
  <p>Résumé article 1... <br/>
    <a href=article1.html>Lire la suite</a></p>
</div>

Maintenant passons à l'action en ajoutant le code jQuery qui rendra cliquable toute la balise <div>.

<script type=text/javascript>
$(document).ready(function(){
  $(.summary).click(function(){
    window.location = $(this).find(a).eq(0).attr('href');
  });
}); 
</script>

Pour améliorer encore l'expérience utilisateur, il est bon d'indiquer que la zone est cliquable en changeant la forme du curseur (un lien est représenté par une main pointant).

Code à ajouter dans $(document).ready :

$(.summary).hover(function(){
                    $(this).css({'cursor':'pointer'});
                    // On peut ajouter ici d'autres modifications CSS au survol du bloc
                  },function(){
                    // Ici, annuler les modifications CSS du survol.
                    // Le curseur reprend sa forme automatiquement
                  });