Коробка с навигацией с вкладками с использованием структуры семантической разметки?

Я пытаюсь создать информационное окно с вкладками для переключения содержимого поля, например: http://www.cssnewbie.com/build-a-tabbed-box-with-css-and-jquery/

Легко с помощью CSS и jQuery, верно? Проблема в том, что я пытаюсь найти способ сделать это с помощью семантической разметки, чтобы при отключении CSS/JS он просто отображал заголовки с их содержимым в правильном порядке. Все примеры, которые я видел, делают что-то вроде этого:

<div id="box-nav">
    <ul>
        <li>Content head 1</li>
        <li>Content head 2</li>
        <li>Content head 3</li>
    </ul>
</div>

<div id="box-content">
    <div id="content-1">
        <p>Blah 1. </p>
    </div>
    <div id="content-2">
        <p>Blah 2. </p>
    </div>
    <div id="content-3">
        <p>Blah 3. </p>
    </div>
</div>

что позволяет довольно легко создать его, разделив заголовки и их содержимое, но я хочу сделать его, используя эту разметку:

<div id="content-1">
    <h2>Content head 1</h2>
    <p>Blah 1. </p>
</div>
<div id="content-2">
    <h2>Content head 2</h2>
    <p>Blah 2. </p>
</div>
<div id="content-3">
    <h2>Content head 3</h2>
    <p>Blah 3. </p>
</div>

так что он изящно деградирует как обычный HTML, но я не могу понять это без использования jQuery для переупорядочения разметки.

Кто-нибудь знает чистый способ сделать это?


html jquery css semantic-markup
person tripRev    schedule 06.06.2012    source источник

Ответы (2)


arrow_upward
6
arrow_downward

У меня есть чистое, чистое и семантическое решение для вас

Я использую элемент dl вместо элементов заголовка. Считаю приемлемым результатом.

В моем решении элемент dl используется для семантических вкладок:

Списки определений, созданные с использованием элемента DL, обычно состоят из ряда пар термин/определение (хотя списки определений могут иметь и другие применения). Таким образом, рекламируя продукт, можно использовать список определений:

разметка примерно такая:

<div id="wrap">
    <dl>
        <dt id="ft"><a href="#tab1">TAB 1</a></dt>
            <dd id="tab1">tab1 content</dd>
        <dt id="st"><a href="#tab2">TAB 2</a></dt>
            <dd id="tab2">tab2 content</dd>
        <dt id="tt"><a href="#tab3">TAB 3</a></dt>
            <dd id="tab3">tab3 content</dd>
    </dl>
</div>

Внешний вид будет таким:
dl element

Для создания интерфейса вкладок из этой разметки используйте этот CSS:

#wrap, dt {
    position: absolute;
}

dl {
    overflow: hidden;
}

dt {
    bottom: 100%;
}

dd, dl {
    width: 640px;
    height: 400px;
}

#st {
    left: 92px;
}
#tt {
    left: 184px;
}
person Vladimir Starkov    schedule 06.06.2012
comment
Спасибо, это было лучшее решение в целом. - person tripRev; 08.06.2012
comment
@VladimirStarkov - не могли бы вы объяснить, как это на самом деле работает? Я не понимаю, как вкладки переключают содержимое, когда на них нажимают без прикрепленного javascript. Я вижу, что это работает, но как ускользает от меня. - person Jan Thomä; 05.09.2015
comment
Я понял, как это работает. Контент расположен вертикально, и когда вы нажимаете на вкладку, вы фактически связываетесь с якорем и используете встроенную функцию, которая прокручивает связанные якоря вверх по странице. Позиционирование делает все остальное. :) - person akmur; 16.10.2015

arrow_upward
0
arrow_downward

Вы можете делать вкладки с помощью css, используя только целевой псевдокласс, чтобы скрыть div.

Целевой класс

person Federico Giust    schedule 06.06.2012
comment
Спасибо, это полезно знать, но в конце концов я выбрал решение Владимира. - person tripRev; 08.06.2012