使用语义标记结构的带标签导航的框？

Question

我正在尝试创建一个信息框，其中包含用于切换框内容的标签，如下所示：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来重新排列标记，我就无法理解它。

任何人都知道干净的方式吗？

Answer 1

我有一个干净，纯粹和语义的解决方案

我使用dl元素代替标题元素。我认为这是可以接受的结果。

• basic functional demo on dabblet.com
  
• decoration for purecss tab interface
  

在我的解决方案中，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>

视觉外观将如此：

要从此标记创建标签界面，请使用此 CSS：

#wrap, dt {
    position: absolute;
}

dl {
    overflow: hidden;
}

dt {
    bottom: 100%;
}

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

#st {
    left: 92px;
}
#tt {
    left: 184px;
}

Answer 2

您只能使用目标伪类隐藏div

来执行带有css的Tabs

Target class