onglet aléatoire

[mlle]

bonjour
les onglets de ma PA sont comme aléatoire, j'ai beua avoir mis le code "selected" dans ma div, comme indiqué, mais parfois l'onglet 1 est à la place de l'onglet 2 et parfois tout reviens dans son sens, bref, j'ai essayer plusieurs manières de faire autrement mais je n'y arrive pas. pourtant j'ai suivi les insctructions    

est-ce que quelqu'un aurait une idée d'où était mon erreur ?   

Code:

.infobulle{position: relative;z-index: 0;}
 
.infobulle:hover{background-color: transparent;z-index: 50;}
 
.infobulle span{
position: absolute;
background-color: #CCCCCC;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}
 
.infobulle span img{
border: 1px;
padding: 5px;}
 
.infobulle:hover span{
visibility: visible;
top: 30px;
left: 190px;
width: 70px ;
color:#000;
opacity:.9;}

Code:

<div class="systab2 s_slide">
               
               <div class="selected">
                   <span style="font-family: dorsa;  color: #425D6E;  text-transform: uppercase; font-size:20px; letter-spacing:2px; font-family: Dorsa;">contexte</span>
                  <div class="just">
                      L'utopie. Le rêve de tout à chacun. La réalisation d’un seul but : le bonheur. Pourtant, là où des civilisations ont échoué, une ville semble avoir réussi. Depuis quand est-elle là ? Une centaine d'année peut-être. Peut-être plus, peut-être moins. Nul ne le sait et ne le saura jamais. Mais cela importe bien peu. En son sein, la population est divisée en cinq factions, chacune possédant ses fonctions, ses couleurs et ses idéaux. Ainsi, naquirent les Altruistes, les Sincères, les Fraternels, les Érudits et les Audacieux. <a href="#">En savoir plus ...</a>
                  </div>
                  
               </div>
               
               <div>
                   <span style="font-family: dorsa;  color: #425D6E;  text-transform: uppercase; font-size:20px; letter-spacing:2px; font-family: Dorsa;">intrigue</span>
                  <div class="just">
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                  </div>
                  
               </div>
               

Code:

$(function(){
  var d=function(){if($(this).is(".selected")) return;var a=$(this).closest(".systab2");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.systab2").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)
});

[demeter1]

En ayant rapidement regardé le tutoriel, je ne vois aucune trame html qui débute par

Code:

<div class="systab2 s_slide">

il y a bien

Code:

<div class="systab s_bottom s_slide s_hover">

[mlle]

c'est un effet de transition, ça n'explique pas pourquoi parfois l'onglet deux se mets devant l'onglet un et parfois l'inverse, tout marche mais il échange parfois les positions et c'est dérangeant

[mlle]

up ?

[demeter1]

Bonsoir mlle,

Juste pour voir si je réussi à trouver le soucis , j'ai reporté les informations sur mon forum d'essai. hormis un texte intitulé conteste et un autre intitulé intrigue, je ne constate aucun onglet.

Voir ce forum : http://crevettes-passion.forumgratuit.org

[mlle]

oh, c'est une erreur de CSS j'ai donnée l'infobulle au lieu du systab.

Code:

/* .systab2 .contents => les conteneurs des contenus associés aux onglets  */
.systab2 .contents {
  margin-top: 1px;
  margin-bottom: 1px;
}
/* style des onglets si ils sont à gauche ou à droite */
.systab2.s_float .tab,.systab2.s_float .tab {
  display: block;
  margin: 5px;
}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab2.s_float .tabs,.systab2.s_float .contents {
  float: left;
}
.just {
  width: 230px;
  height: 110px;
  text-align: justify;
  overflow: auto;
}

[demeter1]

Re,
toujours pas d'onglets, juste deux overflow sur les textes précités.
Js tenté sur index et sur toutes les pages mais soucis identique.

le html ne contient effectivement que contexte et intrigue.

[mlle]

merci