我正在尝试创建一个带有选项卡的信息框,用于切换框的内容,如下所示: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 重新排列标记,我无法完全弄清楚。
有人知道这样做的干净方法吗?