छुपा/दृश्य तत्वों के टैबिंडेक्स को अक्षम और पुन: सक्षम कैसे करें?

Question

तत्व कैसे दिखाई दे रहा है या नहीं (दृश्य-सक्षम क्षेत्र में) के आधार पर मैं तत्व के tabindex को कैसे बदल सकता हूं? मैं इन चीजों में से एक करना चाहता हूं: एक नया सेक्शन दर्ज करने पर वर्तमान tabindex रीसेट करें और उस अनुभाग के तत्वों के लिए नया tabindex असाइन करें। या tabindex कुछ तत्वों को अक्षम और पुन: सक्षम करने में सक्षम हो।

एचटीएमएल:

<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> 

मैं लिंक tabbing आदेश केवल अगर उनके अनुभाग दिखाई दे रहा है में होना चाहता हूँ।

सीएसएस:

#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/

Answer 1

आप गतिशील रूप से जोड़ने के लिए या अपने tabindex मान पर ध्यान नहीं बनाने के लिए किसी भी छिपी हुई फ़ील्ड से disabled="disabled" निकाल सकते हैं।

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