4

ページネーション関連のコンテンツのみを含むdivがあります。使用するのに最適な要素/タグは何ですか？

調べまし<nav>たが、ページ付けは主要なナビゲーションではないため、適していません。

<div class="paginationBar">
    <button class="previous">Previous</button>
          <button>1</button>
          <button>2</button>
          <button>3</button>
    <button class="next">Next</button>
</div>

私にとっての外側のdivは、メインセクションに関連していて、記事要素の外側にあるため、脇に置いておくことができるようです。

私のコードを改善/修正するための他の提案は大歓迎です。

4

5 に答える 5

14

nav ページネーションがその祖先セクション要素（ページ全体ではない！）のコンテンツをナビゲートする主な方法である場合、は正しいコンテナーです。いくつかの例で（同様の質問に対する）私の答えを参照してください。

ページネーションに使用asideすることは、おそらく正しい要素ではありません。ただし、それがそのコンテンツの主要なナビゲーションである場合は、nav内部で使用するのが正しい場合があります。aside aside

ページネーション（名前が示すように）は別のページ/ URLにつながるため、のa代わりに使用する必要があります。次に、値と対応するページ付けリンクを使用できます。使用を主張しているが、まだ別のページがある場合は、要素を使用してこれらの値を提供できます。buttonrelnextprevbuttonlinkrel

于 2012-12-14T14:21:17.377 に答える
6

その要素はまったく必要ないと思います。あなたのボタンは一緒に属し、次のように一緒にとどまる必要があります

<div class="paginationBar">
    <button class="previous">Previous</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button class="next">Next</button>
</div>

バックエンドまたはフロントエンドのいずれかで動的ボタンを必要な場所に挿入するのは非常に簡単です（.insertAfter()たとえば、jQueryの）

古いIEをサポートする必要がない場合は、ボタンのクラスも削除し、:first-child-:last-childを使用してそれらのスタイルを設定できます。

<div class="paginationBar">
    <button>Previous</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>Next</button>
</div>

アップデート

ボタンコンテナについて話すと、おそらく最も適切なタグは<nav>です。

その他の可能な用途<nav>

  1. 目次
  2. 前/次のボタン（またはページネーション）
  3. 検索フォーム
  4. パン粉

ソース

于 2012-12-11T18:45:23.970 に答える
3

他の人が指摘しているように、最良の方法は<nav>アンカータグを使用することです。これは、現在のページ番号が3である5ページの例です。

<nav>
  <ul class="pagination">
    <li><a href="?page=1" rel="first">First</a></li>
    <li><a href="?page=2" rel="prev">Previous</a></li>

    <li><a href="?page=1">1</a></li>
    <li><a href="?page=2">2</a></li>
    <li class="active"><a href="?page=3">3</a></li>
    <li><a href="?page=4">4</a></li>
    <li><a href="?page=5">5</a></li>

    <li><a href="?page=4" rel="next">Next</a></li>
    <li><a href="?page=5" rel="last">Last</a></li>
  </ul>
</nav>

アンカータグが非常に重要である理由は、rel属性によってページがクロール可能になるためです。

また、環境がロードされている場合は、CSSクラスbootstrap.cssが自動的に認識されることにも注意してください。ロードされていない場合のフォールバックとして、これらのクラスに独自のスタイルを提供する必要があります。結果は次のようになります。paginationactivebootstrap.css

シンプルなポケットベル

これで、JavaScriptを使用して<a>要素のclickイベントをインターセプトし、好みの手法を使用して次のページをフェッチできます。

于 2014-12-13T01:08:42.327 に答える
0

XHTMLボキャブラリーをご覧ください。next、prevなどのリンク関係タイプが含まれます。

編集： HTML5のリンクリレーションタイプ

于 2012-12-12T09:21:55.000 に答える
0 
<ol class="paginationBar">
    <li><button class="previous">Previous</button></li>
          <li><button>1</button></li>
          <li><button>2</button></li>
          <li><button>3</button></li>
    <li><button class="next">Next</button></li>
</ol>

それは少し役立ちます

于 2013-01-08T20:15:41.980 に答える