當隱藏父元素與溢出時，阻止選項卡鏈接：隱藏

我有一個可滾動的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不，但有一些圖書館可能有幫助。 –

當隱藏父元素與溢出時，阻止選項卡鏈接：隱藏

回答

相關問題