Верх страницы
Обложка к записи Вкладки (табы) на чистом CSS
Время для прочтения: 0 мин. 4 сек.

Вкладки (табы) на чистом 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 табов

Ссылки

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

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

26 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Zedwolf
Zedwolf
13 лет назад

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

Mc.Sim
13 лет назад

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

Вячеслав
12 лет назад

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

Кирилл
Кирилл
12 лет назад

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

alex
alex
11 лет назад

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

Саня
Саня
11 лет назад

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

Александр
11 лет назад
Ответить на  Кобзарёв Михаил

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

Сергей
Сергей
11 лет назад

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

Сергей
Сергей
11 лет назад
Ответить на  Кобзарёв Михаил

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

mihdan
10 лет назад
Ответить на  Сергей

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

Артур
Артур
9 лет назад

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

mihdan
9 лет назад
Ответить на  Артур

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

Артур
Артур
9 лет назад
Ответить на  mihdan

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

mihdan
9 лет назад
Ответить на  Артур

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

Sergiusz Koczanowski
Sergiusz Koczanowski
9 лет назад

Спасибо.

mihdan
9 лет назад
Ответить на  Sergiusz Koczanowski

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

glonshow
glonshow
9 лет назад

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

mihdan
9 лет назад
Ответить на  glonshow

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

kowkoed
kowkoed
9 лет назад

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

mihdan
9 лет назад
Ответить на  kowkoed

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

Предыдущая запись
Следующая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы