Agir sur la page grâce au menu

Reprenons le menu précédent et ajoutons des id à chaque balise a. L’exemple est visible dans le fichier 10_4_actionPage.html.

<nav id="menu">  
    <ul>  
        <li><a class="actif" id="pommes" href="#">Pommes</a></li> 
        <li><a id="poires" href="#">Poires</a></li>  
        <li><a id="bananes" href="#">Bananes</a></li>  
        <li><a id="kiwis" href="#">Kiwis</a></li>  
    </ul>  
</nav> 

Et en partant de l’idée que le premier lien est l’affichage de la page par défaut, une classe actif a été ajoutée qui le mettra en couleur via le CSS afin de visualiser le dernier lien cliqué par l’utilisateur.

Pour le contenu de cette page, il y a quatre sections, qui ici ne contiennent qu’un titre <h1>, mais qui pourront contenir des articles, images...

  <main> 
    <section class="pommes"> 
      <h1>Pommes</h1> 
    </section> 
    <section class="poires"> 
      <h1>Poires</h1> 
    </section> 
    <section...