css ajuda deixou jquery

Question

ok então basicamente eu tenho uma configuração como esta:

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

Agora meu css esta aparência:

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

Então, basicamente o que eu estou fazendo aqui é apenas mostrar tab_one. Então, quando um usuário clica tab_two muda tab_two para a esquerda: 0px; e muda tab_one para a esquerda: 5000px; (Por isso só muda o do propriedade). O problema é porque a sua parente que vai abaixo da altura um dos separadores que foi antes dele. Então, se a altura de tab_one é 50px então tab_two de superior será 50px. Eu preciso que ele seja 0px. Ele funciona se eu defini-la como absoluta e em seguida, volta para parente, mas que não é possível para o projeto que eu sou trabalhando em porque ele recarrega o guia que eu não quero que aconteça. Qualquer ajuda para descobrir como se sobrepor ou o 0 em vez de 50 seria muito apreciada.

Answer 1

Parece que você tem você pode ter sua posição absoluta e posição relativa misturado ... confira este grande tutorial sobre posicionamento CSS .

Dito isto, eu joguei junto este exemplo para que você possa olhar para ( trabalhar aqui ).

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: Opps o ".tabs um" CSS no código pastebin sobrou de quando eu comecei com cada aba como um div ... ele não faz nada, então você pode ignorá-lo LOL

Answer 2

Ao invés de usar offsets, você pode ocultar / mostrar as guias com a propriedade display. Adicione a classe "guia" para os recipientes de tabulação:

<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 o estilo é:

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

Tudo que você tem a fazer é definir a classe do elemento #tabs a um dos "show_tab_one", "show_tab_two" ou "show_tab_three". Claro, se você tem um número dinâmico de guias com ids dinâmicos, esta solução não vai funcionar para você.