<!-- onglets -->
<ul id="onglets">
<li><a onclick="chpanel('boite1')">Boite 1</a></li>
<li><a onclick="chpanel('boite2')">Boite 2</a></li>
<li><a onclick="chpanel('boite3')">Boite 3</a></li>
<li><a onclick="chpanel('boite4')">Boite 4</a></li>
</ul>

<!-- Boite 1 -->
<div class="boite" id="boite1"> bla bla bla </div>

<!-- Boite 2 -->
<div class="boite" id="boite2"> bla bla bla </div>

<!-- Boite 3 -->
<div class="boite" id="boite3"> bla bla bla </div>

<!-- Boite 4 -->
<div class="boite" id="boite4"> bla bla bla </div>

Les boites doivent toutes avoir les mêmes dimensions d'où la classe .boite

Par exemple, les propriétés suivantes :

.boite {
	position: absolute;
	width: 760px;
	height: 400px;
	margin-top: 40px;
	padding: 10px;
	...
}
			

Rappel: cette page est optimisée pour firefox.

function chpanel(panel) {

/* Cacher toutes les boites */
document.getElementById ('boite1').style.setProperty ("visibility", "hidden", null);

document.getElementById ('boite2').style.setProperty ("visibility", "hidden", null);

document.getElementById ('boite3').style.setProperty ("visibility", "hidden", null);

document.getElementById ('boite4').style.setProperty ("visibility", "hidden", null);

/* Afficher la boite correspondant à l'onglet cliqué */
document.getElementById (panel).style.setProperty ("visibility", "visible", null);

}

Cette unique page OPTIMISEE POUR FIREFOX montre comment intervertir des boites superposées à l'aide de Javascript, en jouant avec les propriétés CSS visibility : hidden ou visible. Elle met aussi accessoirement en pratique comment changer de feuilles de style avec du Javascript ;)

Chaque onglet montre le strict nécessaire du code pour faire fonctionner ce système dans chaque domaine: XHTML, CSS, Javascript.

v0n et Aleks