按钮焦点仅在控制台生效，其他场景失效问题求助

你遇到的问题核心是代码存在几处明显错误，控制台开启时因调试环境的事件循环差异偶然生效，关闭后错误直接暴露：

错误点总结 #

• setTimeout用法错误：setTimeout(oneYear.focus(), 1);直接执行了focus()方法，而非延迟执行，setTimeout需要传入函数引用，不是函数执行结果。
• 变量拼写错误：twentYear应为twentyYear，导致20年按钮的焦点逻辑完全失效。
• 未重置全局状态：点击新按钮时，没有移除旧按钮的active类和焦点，导致多个按钮同时处于激活状态。
• CSS样式冗余：.theme-dark-btn:focus和.btn:focus重复定义，可能引发样式优先级冲突。

修正后的完整代码 #

JavaScript 代码 #

const oneYear = document.getElementById('1Year');
const fiveYear = document.getElementById('5Year');
const tenYear = document.getElementById('10Year');
const twentyYear = document.getElementById('20Year');
// 统一存储按钮，方便批量操作
const dateButtons = [oneYear, fiveYear, tenYear, twentyYear];

function changeDate(date) {
  // 先重置所有按钮的激活状态与焦点
  dateButtons.forEach(btn => {
    btn.classList.remove('active');
    btn.blur();
  });

  switch(date) {
    case 1:
      oneYear.classList.add('active');
      // 正确传递延迟执行的函数
      setTimeout(() => oneYear.focus(), 0);
      break;
    case 5:
      fiveYear.classList.add('active');
      fiveYear.focus();
      break;
    case 10:
      tenYear.classList.add('active');
      tenYear.focus();
      break;
    case 20:
      twentyYear.classList.add('active');
      twentyYear.focus();
      break;
  }
}

CSS 代码（优化后） #

.btn {
  height: 38px;
  line-height: 35px;
  text-align: center;
  padding: 0 18px;
  text-transform: uppercase;
  transition: background-image .3s linear, box-shadow .3s linear;
  border-radius: 20px;
  font-size: 12px !important;
}

.theme-dark-btn {
  transition: all ease 1s;
  background-image: linear-gradient(to left, #1ACC8D, #1ACC8D, #235FCD, #1C4CA3);
  background-size: 300%;
  background-position: 0 0;
  border: 1px solid #1C4CA3;
  font-weight: 600;
  letter-spacing: 1px;
  color: white; /* 移除内联样式，统一管理 */
}

.theme-dark-btn:hover {
  background-position: 100% 0;
  border: 1px solid #1ACC8D;
}

/* 合并激活状态样式，避免优先级冲突 */
.theme-dark-btn:focus,
.theme-dark-btn.active {
  background-color: #1ACC8D;
}

.theme-dark-btn:active {
  background-color: #1ACC8D;
}

HTML 代码（精简版） #

<div class="col">
  <button class="btn theme-dark-btn" type="button" id="1Year" onclick="changeDate(1)" autofocus>1 Year</button>
  <button class="btn theme-dark-btn" type="button" id="5Year" onclick="changeDate(5)">5 Years</button>
  <button class="btn theme-dark-btn" type="button" id="10Year" onclick="changeDate(10)">10 Years</button>
  <button class="btn theme-dark-btn" type="button" id="20Year" onclick="changeDate(20)">20 Years</button>
</div>

关键修复说明 #

1. 修正setTimeout调用逻辑，确保焦点延迟执行，避免浏览器默认点击事件覆盖焦点设置。
2. 新增批量重置逻辑，保证每次点击只有一个按钮处于激活状态。
3. 修复变量拼写错误，让20年按钮的焦点功能正常生效。
4. 优化CSS结构，合并重复样式，移除冗余内联代码，提升可维护性。

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