當父元素被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會導致溢出內容向上移動