probleme tableau à onglet

Support Général

lunea Membre non connecté

Booster Fronde

Le 13/07/2012 à 18h23

#116480

Bonjour,

J'utilise des tableaux à onglet dans le module "Pages".

dont voici le code :

Code HTML :

 
<div id="les_onglets">
    <ul><li id="o_1" class="onglet_selectionner" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <li id="o_5" class="onglet" onclick="changeOnglet(this);">Onglet 5</li>
        </ul>
        <div class="clear"><div id="les_contenus">
    <div id="co_1" class="contenu">Exemple de tableau par onglet</div>
    <div id="co_2" class="contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="contenu" style="display: none;">Mon contenu 4</div>
    <div id="co_5" class="contenu" style="display: none;">Mon contenu 5</div>
</div></div></div>

Code CSS :

 
.onglet{
  float: left;
  padding: 2px;
  margin-right: 4px;
  margin-bottom: -1px;
  color: #000;
  background: #ffffff;
  border: 1px solid #000000;
  cursor: pointer;
  width: 18%;
  list-style: none;}
 
.onglet_selectionner{
  float: left;
  padding: 2px;
  margin-right: 4px;
  margin-bottom: -1px;
  color: #000;
  background: #ffffff;
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: none !important;
  cursor: pointer;
  width: 18%;
  list-style: none;}
 
.onglet:hover{
  background: #9C1C56;}
 
.clear{
  clear: both;}
 
.contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #000000;
  padding: 10px;
  list-style: none;}
 
#les_contenus, #les_onglets{
  width: 100%;}

Code JAVASCRIPT :

 
function changeOnglet(_this){
    var getOnglets    = document.getElementById('les_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'onglet_selectionner';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }

Mon problème est que quand je place plusieurs tableaux sur la même page , tout les tableaux s'affiche normalement avec leur contenu respectif mais quand on clique sur les onglet on change uniquement le contenu du premier tableau.

Je voudrais que les onglets change le contenu de leur tableau respectif.

J'ai tenter de modifier le code à plusieurs reprise mais mes connaissances en JavaScript sont limitée.

Merci d'avance

Édité par lunea Le 13/07/2012 à 18h25

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie

lunea Membre non connecté

ReidLos Membre non connecté