Des onglets inactifs pour une PA.

[Sushi-kun]

Bonjour! =)

Voila je vous expose mon problème. Je suis fondatrice d'un forum et depuis ce matin, je m'active à la création du page d'accueil digne de ce nom. Jusqu'ici, je n'avais pas de problèmes mais en suivant plusieurs tutoriels pour créer un tableau avec onglet, j'ai eu la désagréable surprise de constater que seul l'onglet 1 de mon tableau fonctionnait (voir ici: http://original-character.forumactif.com/. Avant toute chose voici mes codes:

Code dans ma feuille de style CSS:

Code:

ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 10px;
  color: #fff;
  background-image: url("http://i79.servimg.com/u/f79/15/79/57/58/ff310.jpg");
  border: 2px solid #ffffff;
  cursor: pointer;
  margin-bottom: 1px;
} 
.mon_onglet:hover{
  background-image: url("http://i79.servimg.com/u/f79/15/79/57/58/ff210.jpg");
}           
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 10px;
  color: #fff;
  background-image: url("http://i79.servimg.com/u/f79/15/79/57/58/ff310.jpg");
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  border-left: 2px solid #ffffff; 
  border-bottom: 1px solid #ffffff; 
  cursor: pointer; 
  margin-bottom: 1px;
}             
.clear{
  clear: both;
}
.mon_contenu{
  color: #000000;
  background-image: url("http://i79.servimg.com/u/f79/15/79/57/58/ff1110.jpg");
  border: 2px solid #ffffff;
  padding: 10px;
        margin: 1px;           
}
#mes_contenus, #mes_onglets{
  width: 600px;
}

Code dans ma page HTML:

Code:

<script src="http://sd-1.archive-host.com/membres/up/77252600546618716/onglet.js"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclikr="changeOnglet(this);">Bienvenue</li>
        <li id="o_2" class="mon_onglet" onclik="changeOnglet(this);">Le staff</li>
        <li id="o_3" class="mon_onglet" onclik="changeOnglet(this);">Partenaires</li>
        <li id="o_4" class="mon_onglet" oclik="changeOnglet(this);">News</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu"><font face="royalblue"><span style="font-size: 14px; line-height: normal">Bienvenue {USER&amp;#8288;NAME} sur Original Character.
Pour bien débuter ici, voici les liens qu'il te faut aller lire pour t'inscrire.

<blockquote>||<a href="http://original-character.forumactif.com/t1-reglement?sid=890025618852dc438fb04afb62e7a6f3" class="postlink"><font color="sienna"><span style="font-size: 14px; line-height: normal"> Règlement</span></font></a>.
||<a href="http://original-character.forumactif.com/t2-contexte-du-rpg?sid=890025618852dc438fb04afb62e7a6f3" class="postlink"><font color="sienna"><span style="font-size: 14px; line-height: normal"> Contexte</span></font></a>.|| <a href="http://original-character.forumactif.com/f5-presentation?sid=890025618852dc438fb04afb62e7a6f3" class="postlink"> <font color="sienna"><span style="font-size: 14px; line-height: normal">Présentation</span></font></a>.</blockquote></span></font> </div>
    <div id="co_2" class="mon_contenu" style="display: none;">En cours d'écriture (les méchants du staff arrivent! xD)</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></ul>

Et normalement, vous vous attendez à ce que je marque le code Javascript. Là est encore un problème: Je n'ai pas de code JavaScript. J'ai passé mon après-midi à tenter de trouver une solution sur internet, et j'ai essayer de prendre des adresses de ficher js d'autre tutoriel mais rien y fait, je ne sais pas quoi utiliser comme adresse Javascript.

Sans doute est-ce mal expliqué mais je ne sais vraiment plus quoi faire. Je tourne en bourrique depuis plus de trois heures, alors je viens quérir vôtre aide.
Merci d'avance! ><

[Invité]

Bonsoir,

Voici le code à enregistrer en .js et à héberger:

Code:

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

Votre code est presque bon . Ce n'est pas un problème de script, vous avez une adresse valide. C'est juste une petite coquille de frappe: vous avez écrit "onclik" au lieu de "onclick".
En ajoutant ce c, le code fonctionne sur mon forum test:

Code:

<script src="http://sd-1.archive-host.com/membres/up/77252600546618716/onglet.js"></script><div id="mes_onglets">
    <ul><ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Bienvenue</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Le staff</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Partenaires</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">News</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu"><font face="royalblue"><span style="font-size: 14px; line-height: normal">Bienvenue {USER&amp;#8288;NAME} sur Original Character.
Pour bien débuter ici, voici les liens qu'il te faut aller lire pour t'inscrire.

<blockquote>||<a href="http://original-character.forumactif.com/t1-reglement?sid=890025618852dc438fb04afb62e7a6f3" class="postlink"><font color="sienna"><span style="font-size: 14px; line-height: normal"> Règlement</span></font></a>.
||<a href="http://original-character.forumactif.com/t2-contexte-du-rpg?sid=890025618852dc438fb04afb62e7a6f3" class="postlink"><font color="sienna"><span style="font-size: 14px; line-height: normal"> Contexte</span></font></a>.|| <a href="http://original-character.forumactif.com/f5-presentation?sid=890025618852dc438fb04afb62e7a6f3" class="postlink"> <font color="sienna"><span style="font-size: 14px; line-height: normal">Présentation</span></font></a>.</blockquote></span></font> </div>
    <div id="co_2" class="mon_contenu" style="display: none;">En cours d'écriture (les méchants du staff arrivent! xD)</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></ul>

Cordialement.

[Sushi-kun]

C'est effrayant ce qu'une simple petite faute peu causer comme dégâts pour mes nerfs...xD
Je me suis prise la tête toute l'après-midi pour un oubli d'un "c". C'est hallucinant ce que je peux être inattentive des fois.

Enfin bref, merci infiniment de votre aide. Elle m'a été plus que d'un grand secours! De plus, vous avez été d'une rapidité incroyable, c'est vraiment agréable d'avoir de l'aide aussi vite.

Merci encore!
Sushi.