एकल पृष्ठ साइट के लिए नेविगेशन लिंक छोड़ें

Question

मेरे पास एक साइट है जो एकल पृष्ठ के रूप में बनाई गई है और सभी अनुरोध AJAX के साथ किए गए हैं। पेज site.com/#Page या site.com/#Page/Other जैसे हैं।

अब, मुझे साइट पर Skip Navigation लिंक लागू करने की आवश्यकता है, लेकिन चूंकि URL # से शुरू होते हैं, इसलिए मैं एक साधारण एंकर का उपयोग नहीं कर सकता। क्या सभी यूआरएल को बदले बिना ऐसा करने का कोई तरीका है? धन्यवाद।

नोट: छोड़ नेविगेशन कम से कम 3 काम करता है: पृष्ठ के उस भाग को स्क्रॉल, तत्व सामग्री कहां से प्रारंभ (यह भी एक नहीं फ़ोकस करने योग्य तत्व, इस तरह के एक H1 शीर्षक के रूप में हो सकता है) पर ध्यान केंद्रित करने और स्क्रीन पाठकों को परिवर्तन के बारे में पता करने देता है।

Answer 1

आप दो काम करने होते हैं:

(उपयोग tabindex

• एक फ़ोकस करने योग्य तत्व = "- 1 "तत्व है जो h1 तरह डिफ़ॉल्ट)

• फोकस जावास्क्रिप्ट यह का उपयोग करके फ़ोकस करने योग्य नहीं हैं के लिए/jQuery focus() विधि

+०१२३५१६४१०

उदाहरण:

document.getElementById("myEle").focus(); 

या

jQuery("#myEle").focus(); 

Answer 2

प्राप्त करने के लिए आप क्या चाहते हैं, तो आप JQuery में scrollTop() पर एक नज़र ले जा सकते हैं: https://api.jquery.com/scrollTop/

Answer 3

मैं अंत में यह समझ से बाहर। मैं मूल रूप से

1. पड़ा हैश से निपटने के लिए इस्तेमाल किया ढांचा/लिपि अक्षम बदलता है
2. बदलें यूआरएल मुख्य सामग्री को इंगित करने के
3. मूल URL पुनर्स्थापित करें और पुन: सक्षम मैं # 1 में क्या अक्षम ।

उदाहरण के लिए, मैं इस तरह की एक घटना थी:

var onPageChange = function (newLocation, historyData) { 
    // load page 
}; 

पहले, मैं यह करने के लिए बदल दिया है:

var pageChangeEnabled = true; 
var onPageChange = function (newLocation, historyData) { 
    if (pageChangeEnabled) { 
     // load page 
    } 
}; 

और फिर, Skip Navigation लिंक इस तरह दिखता है:

<a href="javascript:pageChangeEnabled=false;var oh=location.hash;location.hash='#content';location.hash=oh;pageChangeEnabled=true;void(0);" id='skipNav'>Skip Navigation</a> 

आसान समझने के लिए, यहमें कोड है:

// disable navigation 
pageChangeEnabled=false; 

// save current hash 
var oldHash=location.hash; 

// update the hash/anchor, make everything work 
location.hash = '#content'; 

// restore the old hash, as there are no elements that have the same 
// name of the URL, it works 
location.hash = oldHash; 

// re-enable page navigation 
pageChangeEnabled=true; 

// void(0); is just to avoid the navigation of the link 
void(0); 

अद्यतन: एडम द्वारा समझाया रूप में, यह पूरी तरह से काम नहीं करता है के रूप में कीबोर्ड नेविगेशन नहीं बदलता है। मैं कर रहा हूं: $('#content').attr('tabindex', '-1').focus();