css оставил справку jquery
Вопрос
итак, в принципе, у меня есть такая настройка:
<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, была бы с благодарностью принята.
Решение
Похоже, у вас может быть перепутана ваша позиция абсолютная и позиция относительная...ознакомьтесь с этим замечательным руководством по Позиционирование 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...это ничего не делает, так что вы можете игнорировать это, ЛОЛ.
Другие советы
Вместо использования смещений вы можете скрывать / отображать вкладки с помощью свойства 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 " ;. Конечно, если у вас есть динамическое количество вкладок с динамическими идентификаторами, это решение не будет работать для вас.