Question

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

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

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

任何想法？

Answer 1

我怀疑它与页面上现有html元素的标签索引有关 - 点击一个锚标签，因为你在上面指定的标签会将你带到相关的部分，但是然后按Tab键会将你带到第一个可用的制表位（通常是链接或表单输入项），可以很容易地返回到页面顶部。

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

Answer 2

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

当您专注于某个链接（通常是带有标签）并按Enter键以关注该链接时，浏览器可能会也可能不会保留焦点。您可以使用:focus { background: yellow; }之类的CSS规则来查看行为差异。

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

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

我担心你在页面上无法改变这一点。它位于用户和浏览器之间。

Answer 3

AFAIK没有办法只使用html。

所以，我使用jquery创建了一个javascript脚本。当用户点击跳转项时，我会查找特定元素中的下一个链接或下一个链接并将焦点放在其上。这解决了我使用Chrome（＆gt; 25）和IE（＆gt; 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();
});

希望这会有所帮助......

HTML：同一页面锚定和使用Tab键

3 个答案: