Onglets dynamiques bis

Voici un petit code Javascript + CSS qui permet de créer un système d'onglets dynamiques (Dynamics Tabs). L'avantage de ce code comparé à la première version d'onglets dynamiques est que les onglets ne sont pas obligés de se suivrent et qu'il est donc plus facile d'utiliser ce code à l'intérieure d'une boucle.
  • Onglet 1
  • Onglet 2
  • Onglet 3
  • Onglet 4
  • Onglet 6
Mon contenu-onglet 1

Javascript :
<script type="text/javascript">
function BasculeElement(_this){
	var Onglet_li = document.getElementById('ul_onglets').getElementsByTagName('li');
	for(var i = 0; i < Onglet_li.length; i++){
		if(Onglet_li[i].id){
			if(Onglet_li[i].id == _this.id){
				Onglet_li[i].className = 'onglet_selectionner';
				document.getElementById('#' + _this.id).style.display = 'block';
			}
			else{
				Onglet_li[i].className = 'onglet';
				document.getElementById('#' + Onglet_li[i].id).style.display = 'none';
			}
		}
	}           
}
</script>
CSS :
<style type="text/css">
#ul_onglets{
margin:0;
padding:0 0 0 5px;
}
.onglet{
float: left;
margin:5px 2px 0 5px;
padding:5px 10px ;
border:1px solid #AAA;
border-bottom:none;
border-radius:5px 5px 0 0;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
color:#555;
cursor: pointer;
list-style: none;
background: #EEE;
}
.onglet:hover{
background: #AAA;
}         
.onglet_selectionner{
float: left;
margin:5px 2px -5px 5px;
padding:5px 10px ;
border:1px solid #AAA;
border-bottom:2px solid white;
border-radius:5px 5px 0 0;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
color:#555;
cursor: pointer;
font-weight:bold;
list-style: none;
}           
.contenu-onglet{
clear: both;
background-color:white;
margin-top:-1px;
padding:5px;
border:1px solid #AAA;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
color:#555;
cursor: text;
}
#conteneur-onglet{
width: auto;
margin: auto;
}
</style>
XHTML :
<ul id="ul_onglets">
<li id="1" class="onglet_selectionner" onclick="BasculeElement(this);">Onglet 1</li>
<li id="2" class="onglet" onclick="BasculeElement(this);">Onglet 2</li>
<li id="3" class="onglet" onclick="BasculeElement(this);">Onglet 3</li>
<li id="4" class="onglet" onclick="BasculeElement(this);">Onglet 4</li>
<li id="6" class="onglet" onclick="BasculeElement(this);">Onglet 6</li>
</ul>
 
<div id="conteneur-onglet">
<div id="#1" class="contenu-onglet">Mon contenu-onglet 1</div>
<div id="#2" class="contenu-onglet" style="display: none;">Mon contenu-onglet 2</div>
<div id="#3" class="contenu-onglet" style="display: none;">Mon contenu-onglet 3</div>
<div id="#4" class="contenu-onglet" style="display: none;">Mon contenu-onglet 4</div>
<div id="#6" class="contenu-onglet" style="display: none;">Mon contenu-onglet 6</div>
</div>
Pour insérer un nouvel onglet, il faut juste ajouter une balise <li></li> :
<li id="7" class="onglet" onclick="BasculeElement(this);">Onglet 7</li>
sans oublier le div correspondant :
<div id="#7" class="contenu-onglet" style="display: none;">Mon contenu-onglet 7</div>
Voir/déposer un commentaire (0) | Signaler un problème