Создание панелей вкладок CSS / JavaScript - каждый элемент навигации находится в том же элементе div, что и соответствующий ему контент

Question

Мне нужно создать набор вкладок CSS / JavaScript. Однако большинство примеров, которые я видел, помещают навигацию в отдельный DIV от контента. Например:

http://webfx.eae.net/dhtml/tabpane/tabpane.html

http://www.stilbuero.de/jquery/tabs_3/

Есть ли пример вкладки CSS, где каждый элемент навигации по вкладке находится в том же элементе div, что и его соответствующее содержимое?

Примерно так:

<div id="tab-item=1">
  <div id="tab-item-1-nav"> ... </div>
  <div id="tab-item-1-content"> ... </div>
<div>
<div id="tab-item=2">
  <div id="tab-item-2-nav"> ... </div>
  <div id="tab-item-2-content"> ... </div>
<div>
<div id="tab-item=3">
  <div id="tab-item-3-nav"> ... </div>
  <div id="tab-item-3-content"> ... </div>
<div>

Answer 1

Это возможно, но, как есть, довольно определенно не рекомендуется (это работа в процессе , которая вчера работала как прелесть в IE7 и сегодня не работает в этом же браузере ...).
Принцип состоит в том, чтобы соединить вашу навигацию по вкладкам вместе, так что вы должны удалить из потока свой вкладочный контент с помощью position: absolute; (РЕДАКТИРОВАТЬ: вы не можете перемещать их после следующего вкладочного контента). 1007 * Таким образом, возникает много проблем: у вас не может быть другого содержимого ниже содержимого вкладки, поскольку вы больше не знаете его высоты (за исключением, конечно, JS или с max-height / height и полосой прокрутки, созданной с помощью свойства overflow). Вы можете легко располагать контент справа, контролируя ширину контента.

Вот функциональная демонстрация: http://jsfiddle.net/3skpt/1/ (с использованием jQuery и jQueryTools, успешно протестированных в Fx 3.6.4, Saf 4.0.x, Op 10.54)

Сегодня я обновлю результаты моей отладки IE7, независимо от того, успешна она или нет.

Навигация не отделена от содержимого здесь и является функциональной из коробки, поэтому класс body.js используется, чтобы не нарушать отображение, когда JS не функционирует.
Ссылки в заголовках и классе .js не должны быть жестко закодированы, как в этом уже слишком длинном примере, но должны быть добавлены через JS.

Теперь, хотя этот пример работает по крайней мере в современных браузерах с несколькими ограничениями (нижний колонтитул?), Я бы реорганизовал контент, когда JS работает, чтобы избежать абсолютного позиционирования. В jQuery довольно быстро создать контейнер перед первым .tab-item контейнером, а затем перемещать каждый h1 в нем. Я считаю, что это гораздо надежнее;)