1

HTML 5マークアップを使用してWebサイトを構築していますが、ナビゲーションとコンテンツの両方にSPRYの「タブ付きパネル」を使用しているため、NAV要素を配置する場所に関して問題が発生しました。

<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 に答える