以下是我的评论分页代码.
<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)？
1 /
<ul class="pager">
<li class="next">
<a href="#">Newer Comments →</a>
</li>
</ul>
2 /
<ul class="pager"> <li class="prevIoUs"> </li> <li class="next"> <a href="#">Newer Comments →</a> </li> </ul>
哪个选项以语义方式正确？
解决方法
我有一个更好的建议使用禁用状态：
<ul class="pager"> <li class="prevIoUs"> <a href="#" class="disabled">Older Comments ←</a> </li> <li class="next"> <a href="#">Newer Comments →</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 ←</button> </li> <li class="next"> <button>Newer Comments →</button> </li> </ul>
用于样式< button> as< 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 ←</button> </li> <li class="next"> <button>Newer Comments →</button> </li> </ul>
以上代码适用于所有浏览器,包括Internet Explorer！ 原文链接：https://www.f2er.com/html/223850.html
