专注于在控制台中工作的按钮，而不是在其他地方

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

首先，当您将按钮click设为focused时，您不需要动态地将其设置为focus()。

那么，为什么背景颜色不变呢

因为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>