Cours Web

Réalisation de sites Internet Lausanne


Onglets

Onglet 0

texte

Onglet 1

texte texte texte texte

Onglet 2

texte texte
texte

  • Onglet 0
  • Onglet 1
  • Onglet 2

Code HTML

Chaque onglet est crée par une balise div de class onglet. Les boutons sont crées par une liste ul li. Chaque onglet et chaque bouton dispose d'un ID unique, numéroté depuis 0.

Les évenements onclick sont réglés pour détecter le clic de souris sur les li. Une classe actif est donnée au bouton et à l'onglet initialement affiché. Normalement l'onglet n° 0.

<div class='onglets'>
  <div id='onglet_0' class='onglet actif'>
    <h3>Onglet 0</h3>
    <p>texte</p>
  </div>
  <div id='onglet_1' class='onglet'>
    <h3>Onglet 1</h3>
    <p>texte texte texte texte</p>
  </div>
  <div id='onglet_2' class='onglet'>
    <h3>Onglet 2</h3>
    <p>texte texte<br />texte</p>
  </div>
  <ul class='boutons'>
    <li id='bouton_0' onclick='afficheOnglet(0)' class='actif'>Onglet 0</li>
    <li id='bouton_1' onclick='afficheOnglet(1)'>Onglet 1</li>
    <li id='bouton_2' onclick='afficheOnglet(2)'>Onglet 2</li>		
  </ul>
</div>

Code Javascript

La variable globale ancien sert à mémoriser le dernier onglet activé. Elle doit être initialisée avec le numéro de l'onglet actif au chargement de la page. Normalement, c'est l'onglet 0.

La fonction afficheOnglet reçoit en paramètre, le numéro de l'onglet à afficher. Elle applique le style actif au bouton et à l'onglet correspondant. Elle retire le style actif à l'ancien bouton et l'ancien onglet correspondant.

<script language="javascript">

var ancien = 0;
function afficheOnglet(numero) {
  document.getElementById('bouton_' + ancien).className = '';
  document.getElementById('bouton_' + numero).className = 'actif';
  document.getElementById('onglet_' + ancien).className = 'onglet';
  document.getElementById('onglet_' + numero).className = 'onglet actif';
  ancien = numero;
}

</script>

Code CSS

L'effet d'onglet est obtenu en positionant une liste ul li de façon absolue de manière à chevaucher l'onglet de 1 pixel. Pour y parvenir le div qui contient les onglets et la liste dispose d'un padding de 21 pixels, soit un pixel de moins que la hauteur des boutons (20 pixels de haut plus deux bords de 1 pixels)

Le code du ul li est placé en dessous des onglets et non en dessus. Ceci pour s'assurer que les boutons seront affichés par dessus les onglets et non l'inverse.

<style type="text/css">
.onglets {
	padding-top: 21px;
	position: relative;
	width: 400px;
}

.onglets ul li { 
	height: 20px;
	margin: 0 4px;
	padding: 0 4px;
	cursor: pointer; 
	float: left; 
	border: 1px solid black;
}

.onglets ul { 
	position: absolute;
	top: 0; left: 0;
	margin: 0;
	padding: 0;
	list-style-type: none; 
}

.onglet {
	padding: 8px;
	border: 1px solid black;
	display: none;
}

.onglets ul li.actif { border-bottom-color: #89E284; }
.onglet, li.actif { background-color: #89E284; }
div.actif { display: block; }

</style>