点击页面任意区域后选中标签页底部边框颜色丢失的HTML/CSS问题

这问题我太懂了！用:focus伪类来实现选中样式确实会碰到这个坑——当你点击页面其他区域时，按钮的焦点就丢失了，对应的样式自然也就没了。要让选中标签的白色底部边框一直保留，咱们得换个思路：用自定义的.active类来标记选中状态，配合JavaScript手动管理这个类的切换，这样状态就不会随便消失啦。

具体步骤和代码修改 #

1. 调整CSS样式 #

把原来依赖:focus的样式替换成.active类，同时确保未选中按钮的底部边框始终是#999999：

.tabContainer .buttonContainer button {
  width: 25%;
  height: 100%;
  float: left;
  outline: none;
  cursor: pointer;
  background-color: #eee;
  border: 1px solid #999999;
  border-radius: 15px 15px 0px 0px;
  /* 确保未选中时底部边框是灰色，避免焦点丢失后样式混乱 */
  border-bottom: 1px solid #999999;
}

/* 用.active类替代:focus，实现持久的选中样式 */
.tabContainer .buttonContainer button.active {
  background-color: white;
  border-bottom: 1px solid white;
}

2. 更新JavaScript逻辑 #

修改showPanel函数，每次点击按钮时，先移除所有按钮的.active类，再给当前点击的按钮添加这个类，这样就能保证只有选中的标签有这个样式：

function showPanel(index) {
  // 获取所有标签按钮
  const buttons = document.querySelectorAll('.tabContainer .buttonContainer button');
  // 移除所有按钮的active类
  buttons.forEach(btn => btn.classList.remove('active'));
  // 给当前点击的按钮添加active类
  buttons[index].classList.add('active');
  
  // 这里可以保留你原来的面板切换逻辑，比如显示对应面板
}

3. 初始化HTML #

别忘了给默认选中的按钮（也就是第一个带autofocus的按钮）加上.active类，确保页面加载时就有正确的初始状态：

<div class="tabContainer">
  <div class="buttonContainer">
    <button autofocus onclick="showPanel(0)" class="active">Course Details</button>
    <button onclick="showPanel(1)">Workshop Schedule</button>
    <button onclick="showPanel(2)">Online Course Details</button>
    <button onclick="showPanel(3)">Online Exam Details</button>
  </div>
</div>

为什么这样能解决问题？ #

:focus是浏览器自带的焦点状态，当你点击页面其他元素时，焦点会从按钮上移走，对应的样式就会失效。而我们自定义的.active类是由JavaScript主动控制的，只有在切换标签时才会更新类的归属，不管页面其他地方怎么点击，选中标签的.active类都不会自动消失，所以样式能一直保持。

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