如何实现点击页面空白区域后仍保留按钮的hover状态？

我用锚标签实现了一组Tab按钮，切换功能正常，点击按钮后按钮能保持类似hover的高亮状态，但点击页面空白区域后，所有按钮的高亮状态都会消失，怎么避免这种情况？求建议，谢谢！

现有代码 #

JavaScript

$(document).ready(function(){
  $('.tab-content').hide();
  $('.tab-content:first').show();
  $('.tabs-nav .wp-block-button__link').click(function() {
    let currentTab = $(this).attr('href');
    $('.tab-content').hide();
    $(currentTab).fadeIn();

    return false;
  });
});

CSS

.wp-block-button.custom-tab-button .wp-block-button__link:hover,
.wp-block-button.custom-tab-button .wp-block-button__link:active,
.wp-block-button.custom-tab-button .wp-block-button__link:focus {
    background: #CBB07A !important;
    border-color: transparent !important;
    background-color: brown !important;
    color: white !important;
}

.wp-block-button.custom-tab-button .wp-block-button__link:active {
  background-color: #FFF; // Reset background color to default
  color: #000; // Reset color to default
}

HTML依赖

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

我知道focus样式在某些情况下有效，但这不是解决方案。

解决办法 #

核心问题是你现在依赖hover/active/focus这些伪类维持高亮，但它们会在元素失去焦点、鼠标离开时自动失效。正确的做法是给选中的Tab按钮添加自定义类，用类来固定高亮样式，不依赖伪类。

具体步骤：

1. 修改CSS，新增选中状态的类样式：

/* 新增选中Tab的固定高亮样式 */
.wp-block-button.custom-tab-button .wp-block-button__link.active-tab {
    background: #CBB07A !important;
    border-color: transparent !important;
    background-color: brown !important;
    color: white !important;
}

/* 保留hover样式，给未选中按钮保留交互反馈 */
.wp-block-button.custom-tab-button .wp-block-button__link:hover {
    background: #CBB07A !important;
    border-color: transparent !important;
    background-color: brown !important;
    color: white !important;
}

/* 移除原来对:active伪类的重置，不需要再干扰选中状态 */
.wp-block-button.custom-tab-button .wp-block-button__link:active {
  /* 按需设置点击瞬间的样式即可，不需要重置 */
}

2. 修改JavaScript，在切换Tab时管理选中类：

$(document).ready(function(){
  $('.tab-content').hide();
  $('.tab-content:first').show();
  // 给默认显示的第一个Tab按钮添加选中类
  $('.tabs-nav .wp-block-button__link:first').addClass('active-tab');

  $('.tabs-nav .wp-block-button__link').click(function() {
    let currentTab = $(this).attr('href');
    $('.tab-content').hide();
    $(currentTab).fadeIn();

    // 移除所有Tab的选中类，给当前点击的Tab添加
    $('.tabs-nav .wp-block-button__link').removeClass('active-tab');
    $(this).addClass('active-tab');

    return false;
  });
});

这样处理后，选中的Tab会一直保留active-tab类的高亮样式，只有点击其他Tab时才会切换，点击空白区域也不会失效。

内容的提问来源于Stack Exchange，提问作者Nickel