Pager上一个/下一个语义

Question

以下是我的注释分页代码。

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

我的问题是，如果我在评论的首页上（并且旧的评论链接被隐藏了，则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，我也有另一个想法。可以使用<a>或<button>代替<input type="button" />标签，即使在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>

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

笑话：经过多年的治疗，我终于可以理解，变灰的按钮什么也没有做，并且不仅仅用来嘲弄我。 begone

！

不需要标记的示例：

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

Answer 5

您还可以在a元素没有