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可能不是正确的元素。但是，如果它是该内容的主要导航，则使用navinside可能是正确的。aside aside

您应该使用a而不是button，因为分页（顾名思义）会导致不同的页面/URL。然后你可以使用这些rel值next和prev对应的分页链接。如果您坚持使用button但仍然有单独的页面，则可以使用该link元素来提供这些rel值。

于 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>锚标签。这是一个包含 5 页的示例，其中当前页码为 3：

<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属性使您的页面可抓取。

另请注意，如果您的环境已bootstrap.css加载，那么它将自动识别pagination和activeCSS 类。您应该为这些类提供自己的样式，以防万一bootstrap.css未加载。结果应如下所示：

简单的寻呼机

现在您可以使用 JavaScript 拦截<a>元素的click事件并使用您喜欢的任何技术获取下一页。

于 2014-12-13T01:08:42.327 回答
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 回答
0

Please have a look at the XHTML Vocabulary. It includes link relation types for next, prev etc.

edit: link relation types in HTML 5

于 2012-12-12T09:21:55.000 回答