Onglets dynamiques

• 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>

Catégorie JavaScript

Les évènements en JavascriptPopup JavaScriptFonction date en JavaScriptAlerte en Javascript sur un lienScript anti copie et blocage de la pageSite en FavorisScript pour imprimer une pageFonction backScript anti copieCréer un filtre sur une image avec du javascriptCompte à rebours JavascriptInterdire l'ouverture d'une page dans une frameOnglets dynamiques