Обнаружил в интернете очень простой способ создания табов без использования JS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <ul class="tabs"> <li><a href="#one">1</a></li> <li><a href="#two">2</a></li> <li><a href="#three">3</a></li> <li><a href="#four">4</a></li> <li><a href="#five">5</a></li> </ul> <div class="tabs-content"> <ul> <li id="one">1</li> <li id="two">2</li> <li id="three">3</li> <li id="four">4</li> <li id="five">5</li> </ul> </div> |
Разметка простая. Список .tabs используется для навигации. Далее идет контейнер .tabs-content со списком, в котором каждый элемент li это отдельный слайд.
1 2 3 4 5 6 7 8 9 | .tabs-content { width:960px; height:300px; overflow:hidden; } .tabs-content li { width:960px; height:300px; } |
Ссылки в навигации указывают на соответствующие id слайдов. Слайдам установлена ширина и высота равные внешнему контейнеру.
Работает в Firefox, Opera (для старых версий нужно немного дополнить CSS), Safari, IE6+.
В HTML у вас class=»tabs-container»
а в CSS tabs-content
Спасибо, исправлено.
Вполне ожидаемое поведение браузеров — переход по указанному якорю.
У такого решения есть одна проблема: если на странице есть вертикальная полоса прокрутки, а верхняя граница таба находится ниже верхней границы экрана, то при нажатии на закладку таба страница промотается так, что таб окажется наверху — точно так же, как при нажатии на якорь страница проматывается до содержимого, указанного в адресе после хеша.
Такое решение годится только тогда, когда все содержимое умещается на экран — в этом случае проматываться ничего не будет. Т.е. это подходит, например, для презентаций на CSS. Только встает вопрос о том, как убедиться, что содержимое вмещается в экран по вертикали.
За идею спасибо — буду использовать для создания презентаций на CSS.
Переход по якорю это да, ожидаемо. Но я, почему-то, не ожидал, что перемещение будет именно внутри блока, который скрывает контент выходящий за его границы.
Спасибо, не знал этого способа. Пусть даже он с изъянами, но тем не менее расширил кругозор.
Вау! Супер.
Спасибо за идею!
Спасибо, действительно интересное решение и простое, и кроссбраузерное. В мемориз.
Одно обидно: что заголовки табов и их содержимое — совершенно разные списки. Это бы неплохо смотрелось в чём-нибудь типа dl/dt/dd. Но тогда, разумеется, сложнее стили писать и, думаю, без Javascript не обойтись. Хотя…
плюс один, полезное решение
а как сделать чтоб были выделены активные табы?
В данном случае никак.
И всё-таки с CSS это можно, правда для этого сначала нужно изрядно поломать мозг.
На Хабре проскакивал пример от небезызвестного Stu Nichols (http://www.cssplay.co.uk/index). Ссылкой не поделюсь, потому что не нашёл её в старых закладках
Смотрите на cssplay в разделах демо. Там, насколько помню, всё было завязано на
:focusдля активного таба и работало на уровне CSS 2.1.Для CSS3 — http://css-tricks.com/css3-tabs/
Только нужно иметь железные нервы, чтобы разобраться во всём этом и добиться максимальной кроссбраузерности
Согласен.
С css3 всё просто. А вот примеры на cssplay действительно поражают в прямом и переносном смысле.
Как оказалось всё элементарно и просто. Нашел один недочёт — Опера 9,27 отказывается переключать вкладки. Если не секрет, то где вы его нашли?
Для старых версий оперы нужно немного дополнить css. Пример нашел тут. Можете посмотреть там, что именно добавить для оперы.
Спасибочки
Встречал похожую реализацию фотогалереи на чистом CSS — там вместо табов были миниатюры, а в основном
div со стилемoverflow: hidden;«прокручивались» фотографии с помощью якорей.Тогда именно проблема с Opera 9 заставила подождать с применением в каком-нибудь проекте, а разобраться в причине с ходу не получилось. Теперь с выходом 10-ой можно реанимировать такую штуку
Странно
Я все сделал верно, а стили почему-то не отображаются
А можно как-то через CSS сделать так, чтобы оно автоматически переключалось?
На чистом CSS2 нет. В CSS3 уже можно.
Добавлю, что в CSS3 это свойство
animation-iteration-countсо значениемinfinite.Подскажите как сделать, чтобы выделялись табы, которые активны в данный момент.
Спасибо.
Круто! спасибо за статью
я обошел переход по якорю след образом, сначала делаем
setTimeout(function () {window.location.href = «#register»;}, 0);
setTimeout(function () {window.location.href = «#»;}, 0);
- то есть сначала переходим на вкладку нужную в модальном окне, после чего нас перекидывает к якорю и экран уползает вниз, а потом переход
таймаут для оперы, у нее локейшн не пашет без этого
Наконец-то… то, что надо. Спасибо за статью! Пойду разбираться.
о блин! высший класс, как раз искал подобный способ создания табов
хотел сделать разбивку уомментариев твким образом, но, наверно, не получится (( ибо # выдаётся индивидуальный каждому комменту и предсказать его нельзя ((
А в чем у вас трудности?
ммм… у меня?
Ну, вот пример страницы:
http://zenway.ru/page/razor-qt
Как её можно разбить на подстраницы? Сами комментирии. Я не прошу готового решения, разумеется )) Сам не безрукий. Но если подскажите общую идею, было бы хорошо.