css Links helfen jquery

Question

ok, also im Grunde habe ich ein setup wie dieses:

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

Jetzt ist mein css sieht wie folgt aus:

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

also im Grunde, was ich hier mache, ist nur zu zeigen, tab_one.Dann klickt ein Nutzer tab_two es änderungen tab_two nach Links:0px;und änderungen tab_one nach Links:5000px;(also es schaltet nur das die Eigenschaft).Das problem ist, weil seine relative es geht unterhalb der Höhe der Reiter, der war, bevor es.Also, wenn tab_one die Höhe 50px dann tab_two s Spitze von 50px.Ich brauche es 0px.Es funktioniert, wenn ich es auf absolute und dann zurück zu relativen, aber das ist nicht möglich, das Projekt, das ich bin arbeiten, denn es lädt die Registerkarte, die ich nicht wollen, zu passieren.Alle Hilfe herauszufinden, wie Sie übereinander oder stellen Sie 0 anstelle von 50 wäre sehr geschätzt.

Answer 1

Es sieht aus wie Sie haben, können Sie Ihre position absolute und relative position gemischt...schauen Sie sich dieses tolle tutorial auf CSS-Positionierung.

Dass gesagt wird, ich warf gemeinsam an diesem Beispiel für Sie, zu betrachten (hier arbeiten).

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>

Skript

$(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:Upps die ".tabs eine" CSS in der pastebin code wurde Links über aus, wenn ich anfing mit den einzelnen Registerkarten als div...es tut nichts, also man kann es ignorieren, LOL.

Answer 2

Anstelle von offsets zu verwenden, können Sie ausblenden/anzeigen der Registerkarten mit der display Eigenschaft.Fügen Sie die "tab" - Klasse, um die tab-Container:

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

Und das stylesheet:

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

Alle Sie haben zu tun ist legen Sie die Klasse der #tabs element zu einem der "show_tab_one", "show_tab_two" oder "show_tab_three".Natürlich, wenn Sie haben eine dynamische Anzahl von Registerkarten mit dynamischen ids, ist diese Lösung nicht für Sie arbeiten.