Onglets dynamiques

  • Teste 1
  • Teste 2
  • Teste 3
  • Teste 4
  • Teste 5
Teste 1
Teste 2
Teste 3
Teste 4
Teste 5

Voici un petit script en Javascript et CSS tout simple qui permet d'obtenir un système d'onglets dynamiques (Dynamic tabs) comme vous pouvez le voir au dessus.

Le code Javascript :
<script type="text/javascript">
//<!--
var Onglet_afficher = 1;
function Affiche(Nom)
{
document.getElementById('affiche-contenu-'+Onglet_afficher).className = 'inactif onglet';
document.getElementById('affiche-contenu-'+Nom).className = 'affiche-contenu-1 onglet';
document.getElementById('contenu_'+Onglet_afficher).style.display = 'none';
document.getElementById('contenu_'+Nom).style.display = 'block';
Onglet_afficher = Nom;
}
//-->
</script>
Le CSS :
<style type="text/css">
.conteneur-onglets 
{
margin: 0;
padding:0 0 0 5px;
}
.onglet
{
display:inline-block;
margin:5px 2px 0 2px;
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;
font-weight:bold;
}
.inactif
{
background:#EEE;
}
.inactif:hover
{
background:#AAA;
}
.affiche-contenu-1
{
background:white;
border-bottom:2px solid white;
padding-bottom:4px;
cursor:text;
}
.contenu
{
background-color:white;
margin-top:-1px;
padding:5px;
display:none;
border:1px solid #AAA;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
color:#555;
cursor: text;
}
</style>
Le HTML :
<ul class="conteneur-onglets">
<li class="inactif onglet" id="affiche-contenu-1" onclick="javascript:Affiche('1');">Teste 1</li>
<li class="inactif onglet" id="affiche-contenu-2" onclick="javascript:Affiche('2');">Teste 2</li>
<li class="inactif onglet" id="affiche-contenu-3" onclick="javascript:Affiche('3');">Teste 3</li>
<li class="inactif onglet" id="affiche-contenu-4" onclick="javascript:Affiche('4');">Teste 4</li>
<li class="inactif onglet" id="affiche-contenu-5" onclick="javascript:Affiche('5');">Teste 5</li>
</ul>
 
<div class="contenu" id="contenu_1">Teste 1</div>
<div class="contenu" id="contenu_2">Teste 2</div>
<div class="contenu" id="contenu_3">Teste 3</div>
<div class="contenu" id="contenu_4">Teste 4</div>
<div class="contenu" id="contenu_5">Teste 5</div>
Le Javascript de fin :
<script type="text/javascript">
//<!--
Affiche(Onglet_afficher);
//-->
</script>
Pour ajouter un onglet c'est très simple, il suffit simplement d'ajouter une ligne <li>***</li> et de changer le numéro :
<li class="inactif onglet" id="affiche-contenu-6" onclick="javascript:Affiche('6');">Teste 6</li>
Puis on ajoute le "div" correspondant :
<div class="contenu" id="contenu_6">Teste 6</div>
Vous devez impérativement faire suivre les numéros pour que ce code fonctionne correctement.
Voir/déposer un commentaire (2) | Signaler un problème