Des onglets inactifs pour une PA.

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Des onglets inactifs pour une PA.

Message par Sushi-kun le Dim 20 Fév 2011 - 18:28

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


Dernière édition par Sushi-kun le Dim 20 Fév 2011 - 18:52, édité 1 fois

Sushi-kun
Nouveau membre

Messages : 18
Inscrit(e) le : 02/02/2011

http://original-character.forumactif.com
Sushi-kun a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des onglets inactifs pour une PA.

Message par Invité le Dim 20 Fév 2011 - 18:43

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 Smile . 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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des onglets inactifs pour une PA.

Message par Sushi-kun le Dim 20 Fév 2011 - 18:48

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.

Sushi-kun
Nouveau membre

Messages : 18
Inscrit(e) le : 02/02/2011

http://original-character.forumactif.com
Sushi-kun a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum