1

我正在使用HTML 5标记构建一个网站，但是遇到了关于放置 NAV 元素的位置的问题 - 因为我在导航和内容中都使用了SPRY “选项卡式面板” ：

<header>
 <div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
   <li class="TabbedPanelsTab" tabindex="0">Home</li>
   <li class="TabbedPanelsTab" tabindex="0">Profile/li>
   <li class="TabbedPanelsTab" tabindex="0">Contact</li>
  </ul>
 <div class="TabbedPanelsContentGroup">
  <div class="TabbedPanelsContent">Content 1</div>
  <div class="TabbedPanelsContent">Content 2</div>
  <div class="TabbedPanelsContent">Content 3</div>
 </div>
 </div>

我认为插入NAV元素的最佳位置是包装UL元素，但这会破坏 SPRY 选项卡式面板（也许我可以通过更改 CSS 中的一些文件路径来解决这个问题？）。

此外，似乎网站的主要内容将保存在选项卡式面板的“内容”区域中，我想知道构建这个网站的最佳方法是什么，关于 NAV 和 ARTICLE 等，所以这在语义上正确的？

也许我正在以错误的方式解决这个问题？

4

1 回答 1

0

我不熟悉 SPRY，但您可能是正确的，如果您希望拥有更多语义标记，则需要编辑 CSS。

假设每个“标签”都是它自己的文章，这就是我将如何标记它：

<div id="TabbedPanels1" class="TabbedPanels">
    <nav>
        <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">Home</li>
            <li class="TabbedPanelsTab" tabindex="0">Profile/li>
            <li class="TabbedPanelsTab" tabindex="0">Contact</li>
        </ul>
    </nav>
    <div class="TabbedPanelsContentGroup">
        <article class="TabbedPanelsContent">Content 1</article>
        <article class="TabbedPanelsContent">Content 2</article>
        <article class="TabbedPanelsContent">Content 3</article>
    </div>
</div>

这不是一个大的变化，但它至少为标记添加了一些更好的语义，同时仍然保持大部分结构完好无损，因此不需要对 SPRY 框架代码进行重大更改。

于 2011-09-14T14:50:28.203 回答