javascript - How to disable and re-enable tabindex of hiddenvisible elements? - Stack Overflow

admin管理员组

文章数量:1293521

How can I change the tabindex 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 tabindex upon entering a new section and assign new tabindex's to the elements in that section. Or be able to disable and re-enable tabindex's of certain elements.

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 the tabbing 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;
    }

​ Live example: /

How can I change the tabindex 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 tabindex upon entering a new section and assign new tabindex's to the elements in that section. Or be able to disable and re-enable tabindex's of certain elements.

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 the tabbing 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;
    }

​ Live example: http://jsfiddle/2UF3n/5/

• javascript
• jquery
• html
• css

Share Follow asked Sep 20, 2012 at 19:14 Jake ZeitzJake Zeitz 2,57444 gold badges2626 silver badges4444 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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

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

本文标签： javascriptHow to disable and reenable tabindex of hiddenvisible elementsStack Overflow