以下是我的评论分页代码。
<ul class="pager">
<li class="previous">
<a href="#">Older Comments ←</a>
</li>
<li class="next">
<a href="#">Newer Comments →</a>
</li>
</ul>
我的问题是如果我在评论的第一页(并且隐藏了较旧的评论链接),则在DOM中显示空列表项。
<li class="previous">
</li>
<li class="next">
<a href="#">Newer Comments →</a>
</li>
我应该以语义方式删除空列表项(1)还是将其留空(2)?
<ul class="pager">
<li class="next">
<a href="#">Newer Comments →</a>
</li>
</ul>
<ul class="pager">
<li class="previous">
</li>
<li class="next">
<a href="#">Newer Comments →</a>
</li>
</ul>
哪个选项以语义方式正确?
答案 0 :(得分:7)
我有更好的建议使用禁用状态:
<ul class="pager">
<li class="previous">
<a href="#" class="disabled">Older Comments ←</a>
</li>
<li class="next">
<a href="#">Newer Comments →</a>
</li>
</ul>
如果你完全摆脱CSS,我还有另一个想法。您可以使用<a>
或<button>
代替<input type="button" />
代码,即使在Facebook中,也会使用相同的内容。因此,您可以将<button>
标记的样式设置为<a>
标记并指定禁用状态,因为即使禁用了JavaScript和CSS,它也能正常工作。
<ul class="pager">
<li class="previous">
<button disabled="disabled">Older Comments ←</button>
</li>
<li class="next">
<button>Newer Comments →</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;}
&#13;
<ul class="pager">
<li class="previous">
<button disabled="disabled">Older Comments ←</button>
</li>
<li class="next">
<button>Newer Comments →</button>
</li>
</ul>
&#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 ←</a>
</li>
<li class="next">
<a href="#">Newer Comments →</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 →</a>
</li>
</ul>
人们为不存在的内容添加一些标记的唯一原因仅在于用户体验,因此用户在他们期望的按钮/链接时不会感到困惑那里已经不存在了。这是残疾人的唯一目的。
笑话:经过多年的治疗,我终于可以理解,灰色的按钮什么都不做,而且只是嘲笑我。 begone !不需要标记的示例:
previous
按钮不应出现在演示文稿的第一张幻灯片上?答案 4 :(得分:0)
您也可以在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 ←</a>
</li>
<li>
<a href="#" rel="next">Newer Comments →</a>
</li>
</ul>
</nav>