Question

我有一个构建为单页的网站，所有请求都是使用AJAX创建的。页面类似于site.com/#Page或site.com/#Page/Other。

现在，我需要在网站中实现一个Skip Navigation链接，但因为网址以#开头，所以我无法使用简单的锚点。有没有办法在不更改所有URL的情况下执行此操作？感谢。

注意：跳过导航至少做三件事：滚动到页面的那一部分，专注于内容开始的元素（它甚至可以是一个不可聚焦的元素，例如H1标题）并让屏幕阅读器了解更改。

Answer 1

你有两件事要做：

有一个可聚焦的元素（使用tabindex =＆＃34; -1＆＃34;对于默认情况下不可聚焦的元素，如h1）
使用javascript / jQuery focus()方法

示例：

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

或

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

Answer 2

要实现您的目标，您可以在JQuery中查看scrollTop()：https://api.jquery.com/scrollTop/

Answer 3

我终于明白了。我基本上不得不

禁用用于处理哈希更改的框架/脚本
更改网址以指向主要内容
恢复原始网址并重新启用我在＃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>

为了便于理解，这是href：

// 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();

跳过单页网站的导航链接

3 个答案: