以下是我的评论分页代码.
<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.jb51.cc/html/223850.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。