제목을 다음과 같이 다시 작성하세요. 다른 영역이 아닌 콘솔 버튼의 기능에 집중하세요.
<p>4개의 버튼이 있고 해당 버튼을 클릭하면 사용자가 현재 활성화된 버튼을 볼 수 있도록 해당 버튼에 포커스를 설정하려고 합니다. </p>
<p>어떤 이유로 콘솔에서는 예상대로 작동합니다. 버튼을 클릭하면 포커스가 추가되고 CSS를 기반으로 배경색이 변경되며, 다른 버튼을 클릭하면 첫 번째 버튼이 포커스를 잃고 새 버튼이 포커스를 받습니다. </p>
<p>콘솔을 열지 않으면 작동하지 않습니다. </p>
<p>
<pre class="brush:js;toolbar:false;">const oneYear = document.getElementById('1Year');
const fiveYear = document.getElementById('5Year');
const tenYear = document.getElementById('10년');
const twoYear = document.getElementById('20년');
함수changeDate(날짜) {
if (날짜 === 1) {
oneYear.className += "활성";
setTimeout(oneYear.focus(), 1);
}
if (날짜 === 5) {
fiveYear.focus();
fiveYear.className += "활성";
}
if (날짜 === 10) {
10년.초점();
}
if (날짜 === 20) {
20년.초점();
}
}</pre>
<pre class="brush:css;toolbar:false;">.theme-dark-btn {
전환: 모두 이즈 1;
배경 이미지: 선형 그라데이션(왼쪽으로, #1ACC8D, #1ACC8D, #235FCD, #1C4CA3);
배경 크기: 300%;
배경 위치: 0 0;
테두리: 1px 실선 #1C4CA3;
글꼴 두께: 600;
문자 간격: 1px;
}
.theme-dark-btn:hover {
배경 위치: 100% 0;
테두리: 1px 실선 #1ACC8D;
}
.theme-dark-btn:초점 {
배경색: #1ACC8D;
}
.theme-dark-btn:활성 {
배경색: #1ACC8D;
}
.btn {
높이: 38px;
줄 높이: 35px;
텍스트 정렬: 중앙;
패딩: 0 18px;
텍스트 변환: 대문자;
전환: 배경 이미지 .3s 선형;
전환: 상자 그림자 .3s 선형;
-웹킷-국경-반경: 20px;
-moz-국경-반경: 20px;
테두리 반경: 20px;
글꼴 크기: 12px !중요;
}
.btn:초점 {
배경색: #1ACC8D;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="col">
<button class="btn theme-dark-btn" type="button" style="color: white" id="1Year" onclick="changeDate(1)" autofocus>1년</button>
<button class="btn theme-dark-btn" style="color: white" id="5Year" onclick="changeDate(5)">5년</button>
<button class="btn theme-dark-btn" style="color: white" id="10Year" onclick="changeDate(10)">10년</button>
<button class="btn theme-dark-btn" style="color: white" id="20Year" onclick="changeDate(20)">20년</button>
</p>
