如何禁用並重新啓用隱藏/可見元素的tabindex？

如何根據元素是否可見（在可查看區域中）來更改元素的tabindex？我想要做這些事情之一：在進入一個新的部分時重置當前的tabindex，並將新的tabindex分配給該部分中的元素。或者能夠禁用並重新啓用某些元素的tabindex。如何禁用並重新啓用隱藏/可見元素的tabindex？

HTML：

<div id="nav"> 
     <a id="firstLink" href="#section1" tabindex="1">Go to section 1</a> 
     <a id="secondLink" href="#section2" tabindex="2">Go to section 2</a> 
    </div> 
    <div id="container"> 
     <div id="section1"> 
      <a href="#" tabindex="3">Specific to section 1</a> 
     </div> 
     <div id="section2"> 
      <a href="#" tabindex="3">Specific to section 2</a> 
     </div> 
    </div>

我想要的鏈接是在跳位順序僅當它們的部分是可見的。

CSS：

#container{ 
     overflow: hidden; 
     width: 400px; 
     height: 400px; 
    } 

    #section1{ 
     background: red; 
     width: 400px; 
     height: 400px; 
    } 

    #section2{ 
     background: green; 
     width: 400px; 
     height: 400px; 
    }

活生生的例子：http://jsfiddle.net/2UF3n/5/

來源

2012-09-20 Jake Zeitz

您可以動態地添加或從任何隱藏字段刪除disabled="disabled"使其tabindex值忽略。

$("a:hidden").attr("disabled","disabled");

來源

2012-09-20 19:34:01

但是如果我不使用'hidden'屬性會怎麼樣。在我的例子中，它是一個帶有「overflow：hidden」的容器。你能否重做我的榜樣，向我展示如何融入？ –

您將需要一些區別來選擇隱藏的元素，在這種情況下，因爲沒有辦法選擇由於溢出而未顯示的鏈接：hidden;沒有進行位置檢查......我認爲這是一個比你想要處理的更痛苦的屁股。 jQuery隱藏選擇器將選擇不佔用文檔空間的項目，但會溢出：隱藏;沒有完成;他們仍佔用空間，你看不到它。我會建議隱藏你不需要通過CSS或jQuery可見的元素，而不是使用overflow：hidden ;. –

這樣做很有意義，但在我的實際項目中，我有大量依賴「overflow：hidden」的動畫。我會嘗試一些不同的選擇器，並按照您的建議使用「disabled」屬性。 –

如何禁用並重新啓用隱藏/可見元素的tabindex？

回答

相關問題