title: How to disable and re-enable tabindex of hidden/visible elements?
body: <p>How can I change the <code>tabindex</code> of an element based on whether or not the element is visible (in view-able area)? I would like to do one of these things: reset the current <code>tabindex</code> upon entering a new section and assign new <code>tabindex</code>'s to the elements in that section.  Or be able to disable and re-enable <code>tabindex</code>'s of certain elements.</p>
  
  <p>html:</p>
  
  <pre><code>    &lt;div id="nav"&gt;
          &lt;a id="firstLink" href="#section1" tabindex="1"&gt;Go to section 1&lt;/a&gt;
          &lt;a id="secondLink" href="#section2" tabindex="2"&gt;Go to section 2&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="container"&gt;
          &lt;div id="section1"&gt;
              &lt;a href="#" tabindex="3"&gt;Specific to section 1&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="section2"&gt;
              &lt;a href="#" tabindex="3"&gt;Specific to section 2&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I want the links to be in the tabbing order ONLY if their section is visible.</p>
  
  <p>css:</p>
  
  <pre><code>    #container{
          overflow: hidden;
          width: 400px;
          height: 400px;
      }
  
      #section1{
          background: red;
          width: 400px;
          height: 400px;
      }
  
      #section2{
          background: green;
          width: 400px;
          height: 400px;
      }
  </code></pre>
  
  <p>​
  Live example: <a href="http://jsfiddle.net/2UF3n/5/" rel="noreferrer">http://jsfiddle.net/2UF3n/5/</a></p>