HTML标签栏需用<a>标签实现语义化跳转，或为<li>/<div>显式添加tabindex="0"、cursor: pointer、click/keydown事件及ARIA属性，确保可访问性与移动端热区达标。
HTML标签栏本身不是可点击区域，得靠CSS和事件配合
浏览器默认把 <li>、<div> 这类容器当普通块级元素，不响应点击。想点标签栏跳转或触发动作，必须显式加交互能力。
常见错误是只写 HTML 结构，比如：
<ul class="tabs"> <li>首页</li> <li>关于</li> </ul>
这样点不动——没绑定事件，也没声明可聚焦或可交互。
- 给
<li>加tabindex="0"，让它能被键盘聚焦（辅助访问必需） - 用 CSS 设置
cursor: pointer，视觉上提示可点击 - 必须用 JavaScript 绑定
click事件，否则行为不会触发 - 如果目标是导航，更推荐直接用
<a>标签包裹文字，天然可点击、可聚焦、带语义
用 <a> 标签做标签栏最省事也最健壮
多数场景下，“标签栏”本质是页面内导航，<a> 就是为此设计的：自带点击、聚焦、键盘回车/空格触发、屏幕阅读器识别。
立即学习“前端免费学习笔记（深入）”；
示例：
<nav aria-label="页面标签">
<ul class="tabs">
<li><a href="#home" data-tab="home">首页</a></li>
<li><a href="#about" data-tab="about">关于</a></li>
</ul>
</nav>
-
href值用#xxx可实现锚点跳转；若需 JS 控制，可设为href="javascript:void(0)"或留空但加role="button" - 务必加
data-tab或类似属性，方便 JS 区分点击的是哪个标签 - 外层
<nav>和aria-label提升可访问性，避免仅靠视觉样式传达功能 - 别忘了用 CSS 移除
<a>默认下划线：a { text-decoration: none; }
纯 div/li 标签加 click 事件时容易漏掉的三件事
有人坚持用 <div> 或 <li> 实现标签栏（比如需要复杂布局或动态渲染），这时 JS 必须补足原生 <a> 自带的能力。
- 没加
tabindex="0"→ 键盘用户无法用 Tab 键到达该标签 - 没监听
keydown事件捕获 Enter/Space → 即使能聚焦，按空格或回车也不触发切换 - 没加
role="tab"和aria-controls属性 → 屏幕阅读器无法理解这是标签控件，也无法关联对应面板
最小可用代码片段：
<li role="tab" tabindex="0" aria-controls="panel-home">首页</li>
然后在 JS 中同时监听：
element.addEventListener('click', handler);
element.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
handler();
}
});
移动端点击区域太小，CSS 必须扩大热区
手机上手指点不准，标签文字本身只有 14–16px 高，直接点极易失败。不能只靠 padding 撑开，要确保整个容器响应区域足够大。
- 给标签项设
min-height: 44px（iOS 推荐最小点击高度）或min-height: 48px（Android 推荐） - 用
padding而不是margin扩展可点击范围——margin不属于元素自身，点那里不会触发事件 - 避免用
transform: scale()缩放文字来“假装”变大，实际点击热区没变，照样点不中 - 真要兼容老安卓，可加
-webkit-tap-highlight-color: transparent消除点击高亮延迟
可点击区域是否足够，最简单的验证方式：在 Chrome DevTools 里打开「Toggle device toolbar」，用模拟手指点几下，看是否每次都能稳定触发。
