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

时间:2014-08-20 11:56:02

标签: html pagination semantics

以下是我的评论分页代码。

<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>

哪个选项以语义方式正确?

5 个答案:

答案 0 :(得分:7)

我有更好的建议使用禁用状态:

<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>

&#13;
&#13;
/* 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;}
&#13;
<ul class="pager">
  <li class="previous">
    <button disabled="disabled">Older Comments &larr;</button>
  </li>
  <li class="next">
    <button>Newer Comments &rarr;</button>
  </li>
</ul>
&#13;
&#13;
&#13;

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

答案 1 :(得分: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>

好运!

答案 2 :(得分:0)

我对这样的事情的个人意见是不对那些不存在的东西使用标记。没有禁用的按钮或链接或空列表项。当您在第一页时,没有上一页,因此上一页不应该有标记。如果您想为上一页链接留出空间,只需使用CSS即可。

另外,如果我是一个坚持者,如果只有一个链接就没有理由要有<ul>,当你有这两个链接时你可以考虑使用<ol>是链接的订单。

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

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

另外,我建议不要使用javascript进行导航。正常的html链接在这里是合适的。

答案 3 :(得分:0)

如果您没有以前的链接,这很好。

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

人们为不存在的内容添加一些标记的唯一原因仅在于用户体验,因此用户在他们期望的按钮/链接时不会感到困惑那里已经不存在了。这是残疾人的唯一目的。

笑话:经过多年的治疗,我终于可以理解,灰色的按钮什么都不做,而且只是嘲笑我。 begone

不需要标记的示例:

  • 你在css中使用定位,
  • 显示禁用按钮会很尴尬
    • e.g。 previous按钮不应出现在演示文稿的第一张幻灯片上?
    • e.g。除非您有保存文件,否则{/ 1}}按钮应该/可能不会出现在视频游戏中?

答案 4 :(得分:0)

您也可以在a元素没有 href的地方实现此功能。这样,它就不会呈现为链接。而且很容易将样式设置为href

HTML5 speca元素说以下话:

  

如果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>