4

我正在尝试创建一个带有选项卡的信息框，用于切换框的内容，如下所示：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 重新排列标记，我无法完全弄清楚。

有人知道这样做的干净方法吗？

4

2 回答 2

6

我有一个干净、纯正和语义化的解决方案给你

我使用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 元素

要从此标记创建选项卡界面，请使用以下命令CSS：

#wrap, dt {
    position: absolute;
}

dl {
    overflow: hidden;
}

dt {
    bottom: 100%;
}

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

#st {
    left: 92px;
}
#tt {
    left: 184px;
}
于 2012-06-06T12:20:25.083 回答
0

您可以仅使用目标伪类使用 css 来隐藏 div

目标类

于 2012-06-06T12:05:07.447 回答