css оставил справку jquery

Question

итак, в принципе, у меня есть такая настройка:

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

Теперь мой css выглядит следующим образом:

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

так что в основном то, что я здесь делаю, показывает только tab_one.Затем, когда пользователь нажимает tab_two, он изменяет tab_two на left: 0px;и меняет tab_one влево: 5000px;(таким образом, он просто переключает свойство ).Проблема в том, что его относительный размер it находится ниже высоты вкладки, которая была перед ним.Таким образом, если высота tab_one равна 50px, то у tab_two top будет 50px.Мне нужно, чтобы оно было 0px.Это сработает, если я установлю для него значение absolute, а затем вернусь к relative, но это невозможно для проекта, над которым я работаю, потому что он перезагружает вкладку, чего я не хочу.Любая помощь в выяснении того, как перекрыть или сделать 0 вместо 50, была бы с благодарностью принята.

Answer 1

Похоже, у вас может быть перепутана ваша позиция абсолютная и позиция относительная...ознакомьтесь с этим замечательным руководством по Позиционирование CSS.

Тем не менее, я собрал этот пример, чтобы вы могли на него взглянуть (работаю здесь).

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>

Сценарий

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

Редактировать:Напротив, CSS ".tabs a" в коде pastebin остался с тех пор, как я начал использовать каждую вкладку в качестве div...это ничего не делает, так что вы можете игнорировать это, ЛОЛ.

Answer 2

Вместо использования смещений вы можете скрывать / отображать вкладки с помощью свойства display . Добавьте " вкладку " Класс для вкладки контейнеров:

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

И таблица стилей:

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

Все, что вам нужно сделать, это установить класс элемента #tabs в один из " show_tab_one " ;, " show_tab_two " или " show_tab_three " ;. Конечно, если у вас есть динамическое количество вкладок с динамическими идентификаторами, это решение не будет работать для вас.