Возврат к списку

14.12.2013

Семантически правильные табы

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

Вот как выглядят типичные вкладки.

Вкладки

Для создания подобных вкладок обычно используют следующую структуру html-кода:

<div class="tabs_wrapper">
	<ul class="tabs_head_list">
		<li class="tab_head active">Астрономия</li>
		<li class="tab_head">Геология</li>
		<li class="tab_head">Гироскопия</li>
	</ul>

	<div class="tab_content active">
		<div class="tab_content_inner">Угловое расстояние вращает тропический год...</div>
		<div class="tab_content_inner">Абразия, скажем, за 100 тысяч лет, переоткладывает криптархей...</div>
		<div class="tab_content_inner">Гироскопический маятник характеризует гиротахометр, определяя...</div>
	</div>
</div>

Добавив стилей и немного javascript получим следующий вид наших вкладок http://jsfiddle.net/fainz777/SsXvP/1/

Выглядит красиво, но если мы отключим стили, увидим следующую картину - http://jsfiddle.net/fainz777/SsXvP/2/. Как видим логическая структура нарушена, заголовок оторван от самого содержиого. Аналогично это будет воспринято и поисковиками и речевыми браузерами. Гораздо логичнее, если бы структура html-кода выглядела подобным образом:

<div class="tabs_wrapper">

	<h2 class="tab_head active">Астрономия</h2>
	<div class="tab_content active">
		<div class="tab_content_inner">Угловое расстояние вращает тропический год...</div>
	</div>

	<h2 class="tab_head">Геология</h2>
	<div class="tab_content">
		<div class="tab_content_inner">Абразия, скажем, за 100 тысяч лет, переоткладывает криптархей...</div>
	</div>

	<h2 class="tab_head">Гироскопия</h2>
	<div class="tab_content">
		<div class="tab_content_inner">Гироскопический маятник характеризует гиротахометр, определяя условия...</div>
	</div>
</div>

Решение задачи достаточно простое, для получения результата достаточно применить следующие стили (приведен минимально необходимый код):

.tab_head {
	float: left; /* или display: inline-block;*/
}

.tab_content {
	float: right;
	width: 100%;
	margin: 40px 0 0 -100%; /* margin-top больше или равен высоте таба-заголовка*/
	display: none;
}

.tab_content.active {
	display: block;
}

Пример целиком: http://jsfiddle.net/fainz777/cLwRx/

Теперь даже с отключенными стилями всё выглядит вполне логично с соблюдением структуры документа - http://jsfiddle.net/fainz777/cLwRx/1/


Возврат к списку