Onglets rangé aléatoirement

[dante]

Bonjour,
Je fais appel à votre aide car j'ai un problème avec un tableau d'onglets.
Les titres de mes onglets (Staff, News, Bienvenue, etc) s'affichent dans un ordre différent à chaque fois que je recharge la page.

Je ne trouve pas d'erreurs dans mon code html et css. Et n'y connaissant rien au JS (que j'accuse haut et fort de ce bug), je vous demande votre aide.

URL du forum où je fais mon inté: http://forumdetest-terrae.lebonforum.com/

(Je précise, cela ne m'arrive que sur Chrome, sur Firefox mes onglets ne bougent pas)

Mon code HTML:

Code:

<div id="tab-bloc" class="systab">
   
   <div class="selected" id="o_1">
       <span><img src="http://i.imgur.com/8aDn6.gif" />Bienvenue</span> <span id="bienvenue"><img src="http://cjoint.com/14au/DHktee1ofuV_bienvenue.jpg" /></span>
      <p>
          Terrae, c'est une chance de se retrouver...
      </p>
      
      <p>
          La possibilité d'avancer, celle de tourner la page. On vous tend une main ; à vous de l'accepter ou de la refuser. Par contre... Sachez que toute décision prise est définitive. Un "non" équivaut à un "adieu" ; le retour en arrière est impossible.
      </p>
      
   </div>
   
   <div id="o_2">
       <span id="contexte"><img src="http://i.imgur.com/Xq6ZJ.jpg" />Contexte</span> <span id="contexte"><img src="http://cjoint.com/14au/DHktfurB00z_contexte.jpg" /><br /></span>
      <p>
          Il était une fois, dans un endroit caché, un monde merveilleux où vivaient des jeunes aux capacités hors du commun.
      </p>
      
      <p>
          Malheureusement, cet endroit paradisiaque disparut. Les pouvoirs envolés, le temps s'occupa de réduire à néant les restes de ce lieu magique.<br /> Mais c'est l'heure du retour. Une nouvelle ère, où ils n'ont plus à se cacher. Une nouvelle ère, où vous êtes les héros. Cette nouvelle génération dotée de pouvoirs dépassant toute humanité...
      </p>
      
      <center>
         
         <p>
             <strong>C'est vous qui l'incarnez.</strong>
         </p>
         
         <p>
             <a href="http://terrae.forumpro.fr/t2-important-contexte" target="_blank">Lire la suite...</a>
         </p>
         
      </center>
      
   </div>
   
   <div id="o_3">
       <span><img src="http://i.imgur.com/8aDn6.gif" />News</span>
      <table class="tableau-news">
         
         <tbody>
            
            <tr>
               
               <td>
                   <span id="news"><img src="http://cjoint.com/13dc/CLvk0B42VvG_clrnwi8a1p5_128476lili.jpg" /></span>
               </td>
               
               <td>
                  
                  <p>
                      <strong><span style="text-decoration: underline;">Ils sont là !</span></strong>
                  </p>
                  
                  <p>
                      Eh oui, vous le savez maintenant. Aëlita & Light, le couple le plus rancunier de Terrae est bel et bien présent dans notre institut et ce n'est pas pour une petite promenade de santé. <br />Qui nous sauvera du tragique destin que nous réservent ces deux-là ?
                  </p>
                  
               </td>
               
            </tr>
            
         </tbody>
         
      </table>
      
   </div>
   
   <div id="o_4">
       <span><img src="http://i.imgur.com/Xq6ZJ.jpg" />Staff</span>
      <table>
         
         <tbody>
            
            <tr>
               
               <td>
                   <strong>Admin</strong>
               </td>
               
               <td>
                   <strong>Modo</strong>
               </td>
               
            </tr>
            
         </tbody>
         
      </table>
      
      <table class="tableau-staff">
         
         <tbody>
            
            <tr>
               
               <td>
                   <img class="imagestaff" src="http://img15.hostingpics.net/pics/594101298137VavaHideko.png" />
               </td>
               
               <td>
                   <img class="imagestaff" src="http://img15.hostingpics.net/pics/827362396393OriharaIzayafull850633copie.png" />
               </td>
               
               <td>
                   <img src="http://img15.hostingpics.net/pics/784753arabesque.png" />
               </td>
               
               <td>
                   <img class="imagestaff" src="http://cjoint.com/13ma/CCpmRtUxOPr_bito.jpg" />
               </td>
               
               <td>
                   <img class="imagestaff" src="http://cjoint.com/14au/DHko2qbcO2H_kakeru.png" />
               </td>
               
            </tr>
            
         </tbody>
         
      </table>
      
   </div>
</div>

Le CSS (celui des onglets):

Code:

/* #tab-bloc = ce tableau d'onglet / .tabs = conteneur des onglets */
#tab-bloc .tabs {
  text-align: center;
  margin: 12px 0px 15px 0px;
}

/* .tab = onglets */
#tab-bloc .tab {
  border: none;
  background: #000;
  margin: 0 20px;
  background: none;
  font-family: Fondamento;
  font-size: 20px;
  font-weight: bold;
}

/* .tab.selected = onglet sélectionné*/
#tab-bloc .tab.selected {
  background: #000;
  box-shadow: 0 0 5px #333;
  font-family: Fondamento;
  font-size: 20px;
  text-shadow: 0px 0px 7px #fff;
}

/* .tab img = image dans les onglets */
#tab-bloc .tab img {
  vertical-align: -3px;
}

/* .contents = conteneur des contenu */
#tab-bloc .contents {
  border: 3px double #aaa;
  padding: 25px;
  font-size: 13px;
  font-family: euphemia;
  text-shadow: 0px 0px 7px #000000;
}


.systab .tab {
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #000;
  border: 1px solid #000;
  cursor: pointer;
}

Mon JS:

Code:

$(function(){
  var d=function(){if($(this).is(".selected")) return;var a=$(this).closest(".systab");a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1]);$(this).addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1])};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(this).html('<div class="'+($(this).is(".s_bottom")?"contents":"tabs")+'"></div><div class="'+($(this).is(".s_bottom")?
"tabs":"contents")+'"></div>');$(a).each(function(){b=$(this).children(":first");b.is("span")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> div.contents",this).append(a);b=$(".content:first,.content.selected",this).last();$(b).addClass("selected").siblings().hide();$(b).data("tab").addClass("selected")}).on("click",".tab",d).filter(".s_hover").on("mouseenter",".tab",d)
});

[dante]

Je me permet de up le sujet =)

[dante]

Up

[Ea]

Bonjour,


Étrange.

À un moment le script utilise $(liste).add(nouveau_elements) et pour une raison que je ne connais pas, sur google chrome ça ajoute parfois les nouveaux éléments ailleurs qu'à la fin de la liste.

J'ai modifié un peu le code pour ne pas utiliser le .add() et j'ai mis le code à jour dans le tutoriel :
https://forum.forumactif.com/t310879-tableaux-a-onglets#2713127

En mettant votre code javascript par celui du tutoriel, vous ne devriez plus avoir le problème.

Cordialement.

[dante]

Super, les onglets restent à leur place maintenant.

Merci pour le coup de pouce
Problème résolu.