当父元素被overflow：hidden隐藏时，阻止tabbing链接

Question

我有一个可滚动的div有一个链接列表。 即使我已将div设置为overflow:hidden ，要隐藏某些链接，在浏览器中进行选项卡时仍可访问它们。 有没有办法在不使用jquery的情况下阻止这种情况？

 <div style="height: 5rem; overflow: hidden"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> <li><a href="#">Link 10</a></li> </ul> </div> 

Answer 1

简短的回答是不，不是我所知道的。 这是因为overflow: hidden; 仅是视觉修饰符，并非旨在限制功能。 这就是可访问性的工作方式。 您必须通过隐藏它（ display: none ， visibility: hidden ），禁用它或通过将各个元素设置为tabIndex="-1"将其从tabIndex删除来删除DOM中项目的功能。 由于CSS无法真正告诉隐藏的内容以及jQuery可以做什么（psuedo类还没有到目前为止），jQuery仍然是你最好的选择。

这里有一些很好的额外信息： Tabbing会导致溢出内容向上移动