Exercices de Javascript : révisions

Exercice

On veut simuler un paneau à onglets en HTML/CSS/Javascript. Chaque onglet correspond à une <div> différente. Cliquer sur l'onglet rend la div correspondante visible.

Onglet 1

Onglet 2

un texte blah blah blah

un	deux
1	2

Question 1

Le code HTML de la page est le suivant :

<div class="onglets">
  <div id="onglet1" class="onglet" onclick="montrer(1)">Onglet 1</div>
  <div id="onglet2" class="onglet" onclick="montrer(2)">Onglet 2</div>
  <div id="zone1" class="zone">
    un texte blah blah blah
  </div>
  <div id="zone2" class="zone">
    <table>
      <tr><th>un </th><th>deux</th></tr>
      <tr><td>1</td><td>2</td></tr>
    </table>
  </div>
</div>

Écrire les CSS pour obtenir la présentation actuelle.

Question 2

Écrire le code javascript pour que les onglets fonctionnent.

Question 3

On souhaite que tous les éléments de tabulation aient la même hauteur (parce que le fond jaune qui change de taille ça n'est pas joli). Écrire le code javascript qui mettra tous les éléments à la taille du plus grand d'entre eux.

Pour connaître la taille actuelle d'un élément affiché, on peut utiliser e.clientHeight. Pour la fixer, il faudra passer par le style (remarque: si vous essayez l'exercice sur machine, il y a pas mal de détails techniques embêtants).

Nota : dans la réalité, le plus simple serait de placer toutes les "zones" dans une div qui aurait automatiquement la bonne taille, et faire toute cette partie en jouant sur le placement et les CSS.