以编程方式设置 tabindex
Setting tabindex programmatically
我正在使用 jQuery 和 css 技巧中的平滑滚动代码片段，但出于某种原因，为可访问性设置 tabindex 无效。我已经直接复制了代码片段，所以我不确定在实现中是否还有其他地方出错了，或者它是否是浏览器（Chrome 的最新版本）。非常感谢对此有更多的关注！
Codepen demonstrating the issue
预期行为：
当您单击 'Skip to content' link 时，它应该平滑向下滚动到内容 div。之后使用键盘进行 tab 键时，它应该直接在内容 div 之后开始聚焦 links（测试 links 4+）
发生了什么：
codepen 向下滚动到内容 div，但是当使用键盘进行 tab 键时，它会跳回 Test Link 1.
如果我将 tabindex 直接添加到 div，预期的功能会起作用：
<div id="primary" tabindex="-1">This works</div>
但是，如果我使用平滑滚动代码段以编程方式添加 tabindex，则不会。我也尝试过使用 .setAttribute() 和 .prop() 而不是 .attr()，但没有成功。
这似乎与正在使用的 jQuery 版本有关。
我在 CodePen 上玩，包括在 CSS 技巧文章中链接到的 Chris Coyier 的笔上，您从中获得了代码，一切似乎都按预期工作。我决定编辑你的 post 以包含一个代码片段，其中包含从你的 Codepen 复制的代码，以避免需要去异地查看它 - 但当我意识到与 Codepen 相反，它似乎工作正常。
但是 Stack Overflow 只允许您添加 jQuery 版本到 3.3.1，而您在代码笔中使用的是 3.6.0（最新）。而且我发现，更改那里使用的 jQuery 的版本会改变它是否有效——具体来说，3.6.0 之前的任何版本（尽管我只测试了 3.x 版本）似乎都可以正常工作。
所以 TLDR：这似乎是最新 jQuery 中的一个错误。出于您的目的，您大概可以只使用稍旧的版本，如 3.5.0。我不知道这是否已被报告为一个问题，我也不完全知道发生了什么 - 但阅读 release notes 我看到他们修复了一个关于焦点的错误，有可能他们这样做导致了这个新问题。
我正在使用 jQuery 和 css 技巧中的平滑滚动代码片段，但出于某种原因，为可访问性设置 tabindex 无效。我已经直接复制了代码片段，所以我不确定在实现中是否还有其他地方出错了，或者它是否是浏览器（Chrome 的最新版本）。非常感谢对此有更多的关注！
Codepen demonstrating the issue
预期行为： 当您单击 'Skip to content' link 时，它应该平滑向下滚动到内容 div。之后使用键盘进行 tab 键时，它应该直接在内容 div 之后开始聚焦 links（测试 links 4+）
发生了什么： codepen 向下滚动到内容 div，但是当使用键盘进行 tab 键时，它会跳回 Test Link 1.
如果我将 tabindex 直接添加到 div，预期的功能会起作用：
<div id="primary" tabindex="-1">This works</div>
但是，如果我使用平滑滚动代码段以编程方式添加 tabindex，则不会。我也尝试过使用 .setAttribute() 和 .prop() 而不是 .attr()，但没有成功。
这似乎与正在使用的 jQuery 版本有关。
我在 CodePen 上玩，包括在 CSS 技巧文章中链接到的 Chris Coyier 的笔上，您从中获得了代码，一切似乎都按预期工作。我决定编辑你的 post 以包含一个代码片段，其中包含从你的 Codepen 复制的代码，以避免需要去异地查看它 - 但当我意识到与 Codepen 相反，它似乎工作正常。
但是 Stack Overflow 只允许您添加 jQuery 版本到 3.3.1，而您在代码笔中使用的是 3.6.0（最新）。而且我发现，更改那里使用的 jQuery 的版本会改变它是否有效——具体来说，3.6.0 之前的任何版本（尽管我只测试了 3.x 版本）似乎都可以正常工作。
所以 TLDR：这似乎是最新 jQuery 中的一个错误。出于您的目的，您大概可以只使用稍旧的版本，如 3.5.0。我不知道这是否已被报告为一个问题，我也不完全知道发生了什么 - 但阅读 release notes 我看到他们修复了一个关于焦点的错误，有可能他们这样做导致了这个新问题。