css ha lasciato help jquery

Question

ok quindi sostanzialmente ho una configurazione come questa:

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

Ora il mio CSS appare così:

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

quindi sostanzialmente quello che sto facendo qui sta mostrando solo tab_one. Quindi quando un utente fa clic su tab_two cambia tab_two a sinistra: 0px; e cambia tab_one a sinistra: 5000px; (quindi cambia semplicemente il proprietà). Il problema è perché il suo parente sta andando sotto l'altezza della scheda precedente. Quindi se l'altezza di tab_one è 50px allora tab_two la parte superiore sarà di 50 px. Ho bisogno che sia 0px. Funziona se lo imposto su assoluto e quindi torniamo al parente, ma ciò non è possibile per il progetto che sono lavorando su perché ricarica la scheda che non voglio che accada. Qualunque aiutare a capire come sovrapporre o renderlo 0 invece di 50 sarebbe molto apprezzato.

Answer 1

Sembra che tu abbia la tua posizione assoluta e la relativa posizione confusa ... dai un'occhiata a questo fantastico tutorial su posizionamento CSS .

Detto questo, ho messo insieme questo esempio per farti vedere ( lavorando qui ).

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: si oppone a " .tabs a " CSS nel codice pastebin è stato lasciato da quando ho iniziato con ogni scheda come div ... non fa nulla, quindi puoi ignorarlo LOL.

Answer 2

Invece di utilizzare gli offset, puoi nascondere / mostrare le schede con la proprietà display . Aggiungi la scheda " " classe nei contenitori delle schede:

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

E il foglio di stile è:

.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 */

Tutto quello che devi fare è impostare la classe dell'elemento #tabs su uno di " show_tab_one " ;, " show_tab_two " o " show_tab_three " ;. Naturalmente, se hai un numero dinamico di schede con ID dinamici, questa soluzione non funzionerà per te.