GreLI

Для соблюдения требований семантичности в коде каждая вкладка должна идти друг за другом: заголовок, содержание, зачем следующая вкладка. Такой подход также гораздо удобней для вывода серверной частью в случае генерируемого содержимого. Для этого идеально подходит список определений <dl>:

<dl class="tabs">
	<dt>Первый заголовок</dt>
	<dd>Содержание первой вкладки</dd>
	<dt>Второй заголовок</dt>
	<dd>Содержание второй вкладки</dd>
	...
</dl>

Заголовки вкладок должны идти рядом, друг за другом, под ними должно показываться содержимое выбранной вкладки. Этого можно добиться с помощью абсолютного позиционирования, но группа вкладок должна идеально вписываться в страницы, в идеале не должно быть никаких лишних отступов и пустого пространства, независимо от того много или мало содержится во вкладке.

Наконец, вкладки должны работать и без скриптов.

Немного подумав, я сообразил, что это вполне реализуемо.

Сначала надо выравнять заголовки, для чего идеально подходит свойство display:inline-block. Оно позволяет построить их друг за другом, при этом можно запретить переносы на другую строку (что впрочем не слишком помогает) и применять все свойства оформления, включая те, что неприменимы для строчных элементов или сложно поддаются.

Как расположить содержимое вкладки за этим рядом? Ведь в коде заголовки и содержимое чередуются друг за другом. Следующий заголовок будет идти после содержимого выбранной вкладки.

Очевидно, что надо вынести содержимое из потока. Кроме абсолютно позиционирования это можно сделать с помощью плавающих элементов. Избежать влияние плавающего элемента на ряд заголовков можно с помощью свойства margin-right:-100%. А затем с помощью «очистки» (известно на английском как «clearfix») выполним требование идеального вписывания в страницу. Итого:

<style type="text/css">
	.tabs {
		overflow:hidden; /* для обхвата плавающих элементов */
	}
	.tabs>dt {
		display:inline-block;
		line-height:30px;
	}
	.tabs>dd {
		display:none;
		float:left;
		width:100%;
		margin-top:30px;
		margin-right:-100%;
	}
	.tab-selected+dd {
		display:block;
	}
</style>

Для избежания перекрытия, содержимое вкладки сдвинуто вниз на высоту заголовков margin-top:30px, а она в свою очередь зафиксирована при помощи line-height:30px.

Результат с небольшим оформлением и простым скриптом можно увидеть на странице примера.

Можно отметить, что у браузера Internet Explorer, включая даже новую предварительную 9-ю версию¹, есть проблемы с перерисовкой на смежном селекторе („+“), однако, они легко обходятся любым изменением на родительском элементе <dl class="tabs">. Сойдёт даже добавление пустой строки к классу (tabs.className += '').

Для простоты использовались селекторы CSS2, однако, решение можно приспособить и для работы под Internet Explorer 6.

P.S. ¹ Проблема с перерисовкой исправлена в релиз-кандидате IE9.