将标题重写为：将重点放在控制台按钮的工作上，而不是其他区域

Question

我有4个按钮，当点击它们时，我试图将焦点设置在它们上面，以便用户可以看到当前活动的按钮。

由于某种原因，在控制台中它的工作方式如预期一样，当点击按钮时，它会添加焦点，根据CSS更改背景颜色，然后当点击另一个按钮时，第一个按钮失去焦点，新按钮获得焦点。

当我没有打开控制台时，它不起作用。

const oneYear = document.getElementById('1Year');
const fiveYear = document.getElementById('5Year');
const tenYear = document.getElementById('10Year');
const twentyYear = document.getElementById('20Year');

function changeDate(date) {

  if (date === 1) {
    oneYear.className += " active";
    setTimeout(oneYear.focus(), 1);
  }
  if (date === 5) {
    fiveYear.focus();
    fiveYear.className += " active";
  }
  if (date === 10) {
    tenYear.focus();
  }
  if (date === 20) {
    twentYear.focus();
  }
}

.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;
}

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

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

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

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

.btn:focus {
  background-color: #1ACC8D;
}

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

Answer 1

首先，当你点击按钮时，你已经使其获得了焦点，你不需要动态地使其获得焦点。

所以，为什么背景颜色没有改变呢？

因为 background-image 已经覆盖了 background-color

你只需要设置 background 而不是 background-color

.btn:focus {
        background: #1ACC8D;
    }

完整的示例，不需要 JS

.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;
}

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

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

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

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

.btn:focus {
  background: #1ACC8D;
}

<div class="col">
  <button class="btn theme-dark-btn" type="button" style="color: white" id="1Year" autofocus>1 Year</button>
  <button class="btn theme-dark-btn" style="color: white" id="5Year">5 Years</button>
  <button class="btn theme-dark-btn" style="color: white" id="10Year">10 Years</button>
  <button class="btn theme-dark-btn" style="color: white" id="20Year">20 Years</button>
</div>