css dejó ayuda jQuery

Question

ok, así que básicamente tengo una configuración 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>

Ahora mi css se ve así:

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

así que básicamente lo que estoy haciendo aquí es solo mostrar tab_one. Luego, cuando un usuario hace clic en tab_two, cambia tab_two a la izquierda: 0px; y cambia tab_one a la izquierda: 5000px; (por lo que simplemente cambia el propiedad). El problema es que por su relación va por debajo de la altura. De la pestaña que tenía antes. Así que si la altura de tab_one es 50px entonces tab_two la parte superior será de 50px. Necesito que sea 0px. Funciona si lo pongo en absoluto y Luego volvemos a lo relativo, pero eso no es posible para el proyecto que soy. trabajando en porque vuelve a cargar la pestaña que no quiero que suceda. Alguna ayuda para averiguar cómo superponerse o convertirlo en 0 en lugar de 50 sería muy apreciado.

Answer 1

Parece que tienes tu posición absoluta y posición relativa mezcladas ... echa un vistazo a este gran tutorial en posicionamiento CSS .

Dicho esto, reuní este ejemplo para que lo veas ( trabajando aquí ).

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;
 })
})

EDITAR: Opps las " .tabs a " CSS en el código pastebin se omitió cuando comencé con cada pestaña como div ... no hace nada, así que puedes ignorarlo LOL.

Answer 2

En lugar de usar compensaciones, puede ocultar / mostrar las pestañas con la propiedad display . Añadir la pestaña " " Clase a los contenedores de pestañas:

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

Y la hoja de estilo es:

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

Todo lo que tienes que hacer es configurar la clase del elemento #tabs en uno de " show_tab_one " ;, " show_tab_two " o " show_tab_three " ;. Por supuesto, si tiene un número dinámico de pestañas con identificaciones dinámicas, esta solución no funcionará para usted.