通过为被点击的按钮动态添加“激活”类，并在 css 中定义该类的样式，可实现点击后持久高亮效果，避免因失焦或点击空白区域导致样式丢失。
通过为被点击的按钮动态添加“激活”类，并在 css 中定义该类的样式，可实现点击后持久高亮效果，避免因失焦或点击空白区域导致样式丢失。
在 Web 开发中，:hover 是瞬态伪类，仅在鼠标悬停时生效；:active 仅在按下瞬间触发；:focus 虽可保留焦点状态，但默认行为依赖可聚焦元素（如 或 tabindex）且易被点击空白处、切换窗口等操作移除。因此，真正可靠的方案是用 JavaScript 主动管理状态——即点击时为当前按钮添加一个自定义激活类（如 .is-active），并用 CSS 精确控制其视觉表现。
✅ 正确实现步骤
1. 修改 JavaScript：添加/移除 .is-active 类
$(document).ready(function() {
// 初始化：显示首个内容区，激活首个 tab 按钮
$('.tab-content').hide();
$('.tab-content:first').show();
$('.tabs-nav .wp-block-button__link').first().addClass('is-active');
// 绑定点击事件
$('.tabs-nav .wp-block-button__link').click(function(e) {
e.preventDefault(); // 替代 return false，更语义化
const $this = $(this);
const targetTab = $this.attr('href');
// 移除所有按钮的激活状态
$('.tabs-nav .wp-block-button__link').removeClass('is-active');
// 为当前按钮添加激活状态
$this.addClass('is-active');
// 切换内容
$('.tab-content').hide();
$(targetTab).fadeIn();
});
});
2. 更新 CSS：用 .is-active 替代 :hover/:active/:focus 的视觉样式
/* 移除对 :hover/:active/:focus 的强依赖，统一由 .is-active 控制 */
.wp-block-button.custom-tab-button .wp-block-button__link.is-active {
background-color: #CBB07A !important;
border-color: transparent !important;
color: white !important;
}
/* 可选：保留 hover 效果作为辅助反馈（不影响激活态） */
.wp-block-button.custom-tab-button .wp-block-button__link:hover:not(.is-active) {
background-color: #E0D0A0; /* 柔和悬停色，区别于激活态 */
color: #333;
}
⚠️ 注意事项：
- 避免滥用 !important：建议通过提高 CSS 选择器特异性（如 .wp-block-button.custom-tab-button .wp-block-button__link.is-active）替代全局 !important，提升可维护性；
- 确保 标签具有 href 属性（即使为 #section1）以保证语义与可访问性；
- 若需键盘导航支持，可额外添加 tabindex="0" 并监听 keydown（Enter/Space），但本场景中 .is-active 已覆盖视觉状态，无障碍基础已满足。
✅ 总结
:hover 不是状态存储机制，而是交互反馈信号。要实现“点击即持久高亮”，本质是将 UI 状态（active）与 DOM 类名绑定。该模式清晰、可控、兼容性强，适用于 Tab、导航菜单、筛选按钮等所有需要显式状态标识的组件。无需依赖焦点管理或 hack 式 CSS，一行 addClass() + 一条 CSS 规则，即可稳健解决。
