Время для прочтения: 1 мин. 9 сек.

Вкладки (табы) на чистом CSS

Обнаружил в интернете очень простой способ создания табов (сменяющих друг друга блоков с контентом). Обычно подобные вещи делаются с помощью javascript, либо сейчас еще экспериментируют с CSS3. Данный пример обходится без этого.

HTML

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

CSS

.tabs-content {
    width:960px;
    height:300px;
    overflow:hidden;
}
.tabs-content ul {
    list-style: none
    /* Эти 3 линии для Opera */
    height: 320px;
    overflow: scroll;
    overflow-y: hidden;
}
.tabs-content ul li {
    width:960px;
    height:300px;
}

Ссылки в навигации указывают на соответствующие id блоков с контентом. Этим блокам указаны ширина и высота равные блоку tabs-content. По умолчанию, при нажатии, браузер ищет в контенте блок с id указанным в ссылке. А т.к. отображаться может какой-либо один блок, это заставляет показывать актуальный.

Работает в Firefox, Opera (для старых версий нужно немного дополнить css), Safari, Google Chrome, IE6+.

Живой пример

0

У Криса Койера также есть свои варианты CSS табов

Ссылки

Пошерить
Плюсануть
Отправить
Вотсапнуть

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

1. Нажимая на кнопку "Отправить", я даю согласие на обработку персональных данных.

2. Для вставки кода используйте специальные теги [code lang="php"]ваш код[/code]

26 комментариев

сначала новые
по рейтингу сначала новые по хронологии

Использую этот вид Таба. При нажатии на кнопку, происходит небольшой скрол страницы вниз, которого не должно быть. Как убрать этот скрол? Пример(левый сайдбар) - http://appsquared.ru/category/top

Никак - в этом и есть смысл табов. Без JavaScript тут не обойтись

Это великолепно, я удивлен и никогда бы не подумал так делать)

Все до безобразия просто и понятно

Sergiusz Koczanowski

Спасибо.

Всегда пожалуйста

Только девушку в начале статьи убрать надо, чтобы не отвлекала от работы)))

Зачем же? Это мотивация

начальник посмотрит на мой монитор и не поймет: работаю я или развлекаюсь

Отключите картинки для это сайта ))) Тут таких мотивационных постов много

Сергей

Хорошее решение, спасибо! Но есть проблема. Как сделать, чтобы при нажатии по вкладке страница не перескакивала экраном к началу этой же вкладки?

Автор
Кобзарёв Михаил

Боюсь, на чистом CSS2 сделать так не получится. Можно попробовать прикрутить CSS3 или JavaScript

Сергей

Было бы замечательно, если в примере появится небольшой JS, решающий эту проблему, а то эти скачки раздражают просто ужасно. Спасибо.

Ну тогда это уже будут не CSS вкладки

А как обойти фикс. высоту height: 320px;? Точнее для каждого таба сделать её разную, динамическую... Чтобы можно было коды комментов вставлять и не следить за этой высотой контента.

Автор
Кобзарёв Михаил

Попробуйте height заменить на min-height

Не пашэ min-height. Как подгонять под размер контейнера?

Было бы классно видеть скрины рецептов, ибо пробовать вслепую как-то не хочется)

А в целом спасибо)

Автор
Кобзарёв Михаил

В статье есть ссылка на пример

Кирилл

Спасиб. Жаль что нет возможности воздействовать через один элемент на стили другого. Подобный аналог есть в css - target - но для него ie минимум 9.

Но как вариант без js и кросбраузер - он единсвтвенный.

Интересный пример, но такие тыбы годятся только для простых вкладок, коды видеоплеера в такие табы не воткнёшь потому что при открытии новой вкладки с плеером - предыдущий плеер не закрывается и продолжает работать.

Автор
Кобзарёв Михаил

Естественно, что без JavaScript невозможно остановить воспроизведение аудио/видео-ролика. Данный способ не рассчитан на работу со скриптами, хотя добавить их очень просто. И заставить остановиться плеер тоже не составит труда при наличии у него JavaScript-API.

Привет. Не подскажешь, как выделить в данном способе текущую выделенную вкладку?

Автор
Кобзарёв Михаил

Чуток скриптов придется добавить.

Автор
Кобзарёв Михаил

Мишань, а как же ты тогда Оперу поборол в те далёкие времена?

Ну-ну, я такое ещё в imagos'е реализовывал.