How to disable and reactivate tabindex hidden / visible elements?

Question

How can I change the tabindex element based on whether the element is visible (in the visible area)? I would like to do one of the following: reset the current tabindex when entering a new section and assigning a new tabindex elements in this section. Or you can disable and re-enable tabindex for certain items.

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> 

I want the links to be in tab order ONLY if their section is visible.

CSS

  #container{ overflow: hidden; width: 400px; height: 400px; } #section1{ background: red; width: 400px; height: 400px; } #section2{ background: green; width: 400px; height: 400px; } 

Real-time example: http://jsfiddle.net/2UF3n/5/

Answer 1

You can dynamically add or remove disabled="disabled" from any hidden field to ignore its tabindex value.

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