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