无需大幅修改HTML 如何调整页面链接Tab聚焦顺序匹配视觉左右排布

完全可以在满足项目约束的前提下，实现匹配视觉逻辑的聚焦顺序，无需大幅改写原有HTML结构，也不需要引入JS逻辑控制焦点。

实现原理 #

浏览器默认的Tab聚焦顺序遵循DOM文档流中可聚焦元素的出现先后顺序，和CSS布局（如浮动、定位调整带来的视觉错位）没有关联。当前场景里，哪怕视觉上左列的“three”在更靠前的位置，只要DOM中“two”的节点排在“three”前面，Tab默认就会先聚焦“two”再聚焦“three”。
按照项目优先接受的“直接添加tabindex属性”的轻量修改方案，操作成本极低：

• 给可交互元素添加正整数形式的tabindex属性后，浏览器会跳过默认DOM遍历逻辑，按照tabindex值从小到大依次聚焦元素
• 针对你期望的one→three→two→four顺序，仅需给4个链接分别添加对应属性即可，完全不需要调整原有容器的层级和先后位置：
  • 对应“one”的链接：加tabindex="1"
  • 对应“three”的链接：加tabindex="2"
  • 对应“two”的链接：加tabindex="3"
  • 对应“four”的链接：加tabindex="4"

相关注意事项 #

• 所有纳入Tab流程的元素的tabindex值不要重复，尽量保证数值连续，避免不必要的排序混乱
• 这种实现方式不需要调整浮动类的CSS布局代码，也不需要改动原有高复杂度的容器结构，完全符合“将DOM顺序调换作为最后兜底选项”的约束
• 不需要引入任何JavaScript焦点控制逻辑，满足项目的技术选型要求

提示：如果后续页面新增了其他可聚焦元素，只需要按照视觉阅读顺序在对应节点上补充对应tabindex值即可，不需要重构原有页面结构。

内容的提问来源于stack exchange，提问作者Haradzieniec