0

我正在使用链接跳转到页面的内容部分。它工作正常；但是，在 IE 和 Chrome 中，如果我按 Tab 跳转后，它会返回到 .

关联 ：<a href="#anchortext">Skip to Content</a>

内容位置<a id="anchortext" class='hidden'>Content</a>

任何想法？

4

3 回答 3

4

我怀疑它与页面上现有 html 元素的选项卡索引有关 - 单击您在上面指定的锚标记会将您带到相关部分，但随后按选项卡将带您到第一个可用选项卡停止（通常是链接或表单输入项），它可以很容易地回到页面顶部。

如果您刷新页面并按一次标签，您将被带到页面的第一个启用标签索引的元素 - 我猜这可能与您在原始问题中被带到的部分相同......

于 2012-11-27T11:59:00.083 回答
0

AFAIK 仅使用 html 无法做到这一点。

因此，我使用 jquery 制作了一个 javascript 脚本。当用户单击跳转项目时，我会在特定元素内查找下一个链接或下一个链接并将焦点放在它上面。这解决了我对 Chrome (>25) 和 IE (>7) 的问题，当然 Firefox 在正确解释选项卡操作方面做得非常出色。

$("#jumpToMenu").on("keydown", function(e) {
    var keyCode = e.keyCode || e.which;
    if(keyCode == 13) { 
        e.preventDefault();
        e.stopPropagation();
        $("#myMenuToJump").find('a:first').focus();
    }
}).on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();
    $("#myMenuToJump").find('a:first').focus();
});

希望这可以帮助...

于 2013-05-13T19:14:28.287 回答
0

这似乎是浏览器中内部链接处理方式不同的问题，并且似乎属于规范中未定义的行为类别，因此取决于浏览器。

当您专注于一个链接（通常使用制表符）并按 Enter 以跟随该链接时，浏览器可能会或可能不会保留焦点。您可以使用 CSS 规则（如:focus { background: yellow; }.

如果焦点被保留（这有点不合逻辑，因为焦点元素很可能不在视线范围内），一个选项卡会将您带到页面上的下一个可焦点元素（“下一个”在选项卡顺序的意义上）。

如果焦点丢失，它可能被视为将焦点赋予整个页面（IE 奇怪），或者没有焦点。无论哪种方式，点击选项卡都会将您带到页面上的第一个可聚焦元素（根据选项卡顺序）。

恐怕您无法在页面上做任何事情来改变这一点。它在用户和浏览器之间。

于 2012-11-28T07:54:05.533 回答