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

Вкладки (Табы/Tabs) на чистом CSS с интересным эффектом появления — исчезновения, из минусов высоту вкладки нужно задавать в ручную.

Идея построения закладок на одном CSS витает в среде веб дизайна уже достаточно давно. Однако среди множества реализаций очень немногие соответствуют тому функционалу, который ожидается от закладок. Обычно, пользователь надеется, что нажав на закладку, он увидит новое содержание без перезагрузки страницы.

С 2008 года проводились различные попытки реализовать функционал закладок на чистом CSS без привлечения JavaScript. В основе одного направления лежит использование псевдо-класса :target. Другое направление базируется на псевдо-классе :cheсked для радио кнопок и смежных комбинаторах.

Второе направление показывало гораздо лучший результат, за исключением работы с браузерами семейства WebKit, которые не давали работать вместе селекторам псевдо-класса и смежным комбинаторам. Но в Safari 5.1 и Chrome 13 ошибка наконец-то устранена!

И теперь можно реализовать закладки с использованием псевдо-класса :checked, что, вероятно, станет основным методом для решения данной задачи на несколько лет.

JAVASCRIPT - Не используется.

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
    height: 320px;
    overflow: scroll;
    overflow-y: hidden;
}
.tabs-content ul li {
    width:960px;
    height:300px;
}
				
			

В чем польза от данного метода?

  • Доступность. Радио кнопки скрываются с помощью свойства display: none, поэтому программы для чтения с экрана не будут видеть их и сбиваться. А содержание не использует свойства display: none; и остается доступным.
  • Работает в Safari 5.1+, Chrome 13+, Firefox 3.6+, Opera 10+, и IE 9+.
Свежие записи
Команда RD

Команда RD и RMDIR позволяют удалять как каталоги, так и

Web-Дизайн
help2site
Операторы PHP

Операторы позволяют выполнять различные действия с переменными, константами и выражениями. Специальные операторы присваивания Наряду с обычным оператором присваивания в PHP существуют комбинированные операторы, которые позволяют

Программы
help2site
Выбираем клиент для «ВКонтакте» на Android

Мы уже  не представляем себе жизнь без социальных сетей, которые прочно и надежно ворвались в нашу повседневную жизнь. Если в Instagram или Twitter редко увидишь

Аndroid
help2site
Как добавить в Android «корзину»

Для нас всех привычно, что все файлы на нашем компьютере перед полным удалением попадают в корзину и если мы случайно удалим что то нужное это

Программы
help2site
Программа Advego Plagiatus

Advego plagiatus, или на русском языке звучит как адвего плагиатус, – это отличная программа проверки на плагиат текстового контента, размещаемого блоггером на своем сайте/блоге. Есть

Linux
help2site
Массовое заражение серверов Linux (CVE-2019-10149)

Exim (v4) — это агент пересылки почты. exim4-config предоставляет инфраструктуру конфигурации для служб exim4. Она была вынесена в отдельный пакет для упрощения замены конфигурационной схемы