css laissé aide jquery

Question

ok donc fondamentalement, j'ai une configuration comme celle-ci:

<div id="tabs">
    <div id="tab_one">
        Something here
    </div>

    <div id="tab_two">
        Something else here
    </div>

    <div id="tab_three">
        Another thing here
    </div>
</div>

Maintenant, mon css ressemble à ceci:

#tab_one {
    position:relative;
    left:0px;
    top:0px;
}
#tab_two {
    position:relative;
    left:5000px;
}
#tab_three {
    position:relative;
    left:5000px;
}

donc fondamentalement, ce que je fais ici ne montre que tab_one. Ensuite, lorsqu'un utilisateur clique sur tab_two, tab_two devient gauche: 0px; et change tab_one à gauche: 5000px; (donc il suffit de la la propriété). Le problème vient du fait que son relatif passe en dessous de la hauteur de l'onglet qui était devant elle. Donc, si la hauteur de tab_one est 50px, celle de tab_two le dessus sera 50px. J'ai besoin que ce soit 0px. Cela fonctionne si je le règle sur absolu et puis retour à relative mais ce n'est pas possible pour le projet que je suis travailler parce que cela recharge l'onglet que je ne veux pas arriver. Tout aider à trouver comment se chevaucher ou le rendre 0 au lieu de 50 serait grandement apprécié.

Answer 1

Il semble que vous ayez peut-être votre position absolue et votre position relative confondues ... consultez ce didacticiel génial sur Positionnement CSS .

Cela étant dit, j’ai préparé cet exemple pour que vous puissiez le regarder ( ici ).

CSS

.tabs {
 position: relative;
 left: 0;
 top: 0;
}
.info {
 position: absolute;
 left: -5000px;
 top: 25px;
}
.active {
 position: absolute;
 top: 25px;
 left: 0;
}

HTML

<div class="tabs">
 <a href="#tab_one">Tab 1</a>
 <a href="#tab_two">Tab 2</a>
 <a href="#tab_three">Tab 3</a>

 <div>
  <div id="tab_one" class="info">
   Something here
  </div>

  <div id="tab_two" class="info">
   Something else here
  </div>

  <div id="tab_three" class="info">
   Another thing here
  </div>
</div>

Script

$(document).ready(function(){
 // select first tab, get ID
 var tmp = $('.tabs a:eq(0)').attr('href');
 $(tmp).removeClass('info').addClass('active');

 // tab display
 $('.tabs a').click(function(){
  $('.tabs div > div').removeClass('active').addClass('info');
  $( $(this).attr('href') ).addClass('active');
  return false;
 })
})

EDIT: oppose les ".tabs a" Les CSS dans le code pastebin ont été laissées depuis le début avec chaque onglet en tant que div ... il ne fait rien, vous pouvez donc l'ignorer LOL.

Answer 2

Au lieu d’utiliser des décalages, vous pouvez masquer / afficher les onglets avec la propriété display . Ajoutez l'onglet " " classe aux onglets:

<div id="tabs">
    <div id="tab_one" class="tab">
        Something here
    </div>

    <div id="tab_two" class="tab">
        Something else here
    </div>

    <div id="tab_three" class="tab">
        Another thing here
    </div>
</div>

Et la feuille de style est:

.tab { display: none } /* Don't render by default */

.show_tab_one #tab_one,
.show_tab_two #tab_two,
.show_tab_three #tab_three { display: block } /* Selectively render */

Tout ce que vous avez à faire est de définir la classe de l'élément #tabs sur l'une des options "show_tab_one", "show_tab_two". ou "show_tab_three". Bien sûr, si vous avez un nombre dynamique d’onglets avec des identifiants dynamiques, cette solution ne fonctionnera pas pour vous.