页面加载时如何使btn-group容器内的按钮自动获得焦点

根据你的需求，这里提供两种常见的实现方式，分别对应视觉样式激活和焦点激活：

一、直接添加Bootstrap激活样式（静态设置） #

如果只需要页面加载时某个按钮显示激活的高亮样式，直接给目标按钮加上Bootstrap的active类，同时补充aria-pressed="true"提升可访问性：

<div class="btn-group" role="group">
   <button type="button" class="btn btn-outline-success btn-lg active" aria-pressed="true">Broiler</button>
   <button type="button" class="btn btn-outline-success btn-lg">Layer</button>
   <button type="button" class="btn btn-outline-success btn-lg">Free Range</button>
</div>

二、通过JavaScript动态激活（适合动态内容） #

如果按钮是动态生成的，或者需要页面完全加载后再触发激活逻辑，用以下方法：

1. 让指定按钮获得焦点 #

页面加载完成后，选中目标按钮并调用focus()方法，这样按钮会获得键盘焦点：

document.addEventListener('DOMContentLoaded', function() {
  // 选中btn-group下的第一个按钮并设置焦点
  document.querySelector('.btn-group .btn').focus();
});

2. 实现单选式激活切换（默认激活第一个） #

如果需要模拟单选按钮组的效果，页面加载时默认激活第一个，点击其他按钮时自动切换激活状态：

document.addEventListener('DOMContentLoaded', function() {
  const btnGroupButtons = document.querySelectorAll('.btn-group .btn');
  
  // 默认激活第一个按钮
  if (btnGroupButtons.length > 0) {
    btnGroupButtons[0].classList.add('active');
    btnGroupButtons[0].setAttribute('aria-pressed', 'true');
  }

  // 绑定点击事件，切换激活状态
  btnGroupButtons.forEach(button => {
    button.addEventListener('click', function() {
      // 移除所有按钮的激活状态
      btnGroupButtons.forEach(btn => {
        btn.classList.remove('active');
        btn.setAttribute('aria-pressed', 'false');
      });
      // 激活当前点击的按钮
      this.classList.add('active');
      this.setAttribute('aria-pressed', 'true');
    });
  });
});

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