如何通过JavaScript实现Tab键聚焦链接时显示「About LTS」文本？

可以通过CSS的:focus伪类结合简单的HTML结构调整来实现，无需JavaScript，完全适配原生键盘交互的无障碍要求：

步骤1：调整HTML结构 #

给默认显示的「About」文本添加容器，方便样式控制：

<a href="#about">
  <span class="default-label">About</span>
  <abbr title="The Little Taco Shop" class="focus-label">About LTS</abbr>
</a>

步骤2：添加CSS样式 #

通过样式切换默认状态与聚焦状态下的文本可见性：

/* 默认状态：隐藏「About LTS」，显示「About」 */
.focus-label {
  display: none;
}

/* 链接被Tab聚焦时：隐藏「About」，显示「About LTS」 */
a:focus .default-label {
  display: none;
}

a:focus .focus-label {
  display: inline;
}

原理说明 #

• 利用CSS原生:focus伪类捕获链接的键盘聚焦状态
• 通过display属性切换两个文本节点的显示/隐藏，实现聚焦时的文本切换
• 保留<abbr>标签的title属性，不影响原本的悬停提示功能

替代方案（无需修改原有HTML结构） #

如果不想调整现有HTML结构，可通过定位覆盖实现，但该方案兼容性稍差且对无障碍支持有限，仅作参考：

a {
  position: relative;
}

/* 默认隐藏abbr文本 */
a abbr {
  position: absolute;
  left: 0;
  color: transparent;
}

/* 聚焦时显示abbr，同时覆盖原有文本 */
a:focus abbr {
  color: inherit;
}
a:focus::before {
  content: '';
  position: absolute;
  left: 0;
  width: 40px; /* 需匹配「About」文本宽度 */
  height: 100%;
  background: #fff; /* 需与页面背景色一致 */
}

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