寻呼机上一个/下一个语义

Question

以下是我的cmets分页代码。

<ul class="pager">
  <li class="previous">
    <a href="#">Older Comments &larr;</a>
  </li>
  <li class="next">
    <a href="#">Newer Comments &rarr;</a>
  </li>
</ul>

我的问题是，如果我在 cmets 的第一页（并且较旧的 cmets 链接被隐藏），则 DOM 中会显示一个空列表项。

<li class="previous">
</li>
<li class="next">
  <a href="#">Newer Comments &rarr;</a>
</li>

在语义上，我应该删除空列表项 (1) 还是将其留空 (2)？

1/

<ul class="pager">
  <li class="next">
    <a href="#">Newer Comments &rarr;</a>
  </li>
</ul>

2/

<ul class="pager">
  <li class="previous">
  </li>
  <li class="next">
    <a href="#">Newer Comments &rarr;</a>
  </li>
</ul>

哪个选项在语义上是正确的？

Answer 1

我有一个更好的建议是使用禁用状态：

<ul class="pager">
  <li class="previous">
    <a href="#" class="disabled">Older Comments &larr;</a>
  </li>
  <li class="next">
    <a href="#">Newer Comments &rarr;</a>
  </li>
</ul>

---

尝试 2

如果你完全摆脱 CSS，我还有另一个想法。您可以使用<button> 或<input type="button" /> 代替<a> 标签，即使在Facebook 中，也使用相同的东西。因此，您可以设置 <button> 标记的样式，使其看起来像 <a> 标记并提供禁用状态，因为即使 JavaScript 和 CSS 都被禁用，这也可以工作。

<ul class="pager">
  <li class="previous">
    <button disabled="disabled">Older Comments &larr;</button>
  </li>
  <li class="next">
    <button>Newer Comments &rarr;</button>
  </li>
</ul>

将<button> 设置为<a>：

/* Just for this demo */
ul, li {margin: 0; padding: 0; list-style: none; display: inline-block;}

button {border: none; background: none; color: #00f; text-decoration: underline; cursor: pointer;}
button:disabled {color: #999; cursor: default;}

<ul class="pager">
  <li class="previous">
    <button disabled="disabled">Older Comments &larr;</button>
  </li>
  <li class="next">
    <button>Newer Comments &rarr;</button>
  </li>
</ul>

以上代码适用于所有浏览器，包括 Internet Explorer！ :)

Answer 2

这里简短而甜蜜.. :)

<style type="text/css">
a.disabled {
   pointer-events: none;
   cursor: default;
   color:#999;
}
</style>
<ul class="pager">
  <li class="previous">
    <a class="disabled" href="#">Older Comments &larr;</a>
  </li>
  <li class="next">
    <a href="#">Newer Comments &rarr;</a>
  </li>
</ul>

祝你好运！

Answer 3

我个人对此类事情的看法是不要对不存在的东西使用标记。没有禁用的按钮或链接或空列表项。当您在第一页时，没有上一页，因此上一页应该没有标记。如果您想为上一页链接留出空间，只需使用 CSS。

另外，如果我是一个坚持不懈的人，那么如果只有一个链接，就没有理由使用<ul>，当你有两个链接时，你可以考虑使用<ol>，因为有一个命令链接。

如果您能够更改第 1 页案例的模板，我建议只是一个简单的：

<div class="next">
    <a href="nextlink">next page</a>
</div>

另外，我建议不需要 javascript 进行导航。普通的html链接在这里是合适的。

Answer 4

如果你没有以前的链接，这很好。

<ul class="pager">
  <li class="next">
    <a href="#">Newer Comments &rarr;</a>
  </li>
</ul>

人们为不存在的东西添加一些标记的唯一原因只是为了用户体验，这样用户就不会在他们期望的按钮/链接不存在时感到困惑不在那里了。这是禁用元素的唯一目的。

笑话：经过多年的治疗，我终于明白，灰色的按钮没有任何作用，而不仅仅是为了嘲讽我。 开始！

不需要标记的示例：

• 您在 CSS 中使用定位，
• 显示禁用的按钮会很尴尬
  • 例如previous 按钮不应出现在演示文稿的第一张幻灯片上？
  • 例如continue 按钮应该/不能出现在视频游戏中，除非您有保存文件？

Answer 5

您也可以在a 元素没有 href 的情况下实现此功能。这样它就不会呈现为链接。当它有 href 时，它很容易设置不同的样式。

HTML5 spec 对a 元素有以下说明：

如果a 元素没有href 属性，则该元素表示一个占位符，用于放置链接（如果相关）。

为了获得良好的语义，您还应该用nav 元素围绕您的组件，并在链接上使用rel="prev" 和rel="next"。

.pagination a:not([href]){
  color: lightgray;
}

<nav class="pagination">
  <ul>
    <li>
      <a rel="prev">Older Comments &larr;</a>
    </li>
    <li>
      <a href="#" rel="next">Newer Comments &rarr;</a>
    </li>
  </ul>
</nav>