当隐藏父元素与溢出时，阻止选项卡链接：隐藏

我有一个可滚动的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>

来源

2017-03-24 Eric

请解释一下你怎么从这种需要？ –

如果屏幕上不可见，我需要防止超级链接被键盘选项卡访问。 – Eric

简短的回答是否定的，不是我的知识。这是因为overflow: hidden;只是一个视觉修饰符，并不旨在限制功能。这是可用性意图工作的方式。您必须通过隐藏DOM中的项目（display: none,visibility: hidden），将其禁用或从tabIndex中删除它，方法是将各项元素设置为tabIndex="-1"，以删除该项目的功能。由于CSS无法真正了解隐藏的内容以及jQuery所不具备的功能（伪类还没有到此为止），所以jQuery仍然是您最好的选择。

下面是一些对你的好额外的信息：Tabbing causes overflow content to shift up

来源

2017-03-24 04:48:12

有没有一种简单的方法来使用Vanilla JavaScript？ – Eric

@Eric不，但有一些图书馆可能有帮助。 –

当隐藏父元素与溢出时，阻止选项卡链接：隐藏

回答

相关问题