제목을 다음과 같이 다시 작성하세요. 다른 영역이 아닌 콘솔 버튼의 기능에 집중하세요.

Question

4개의 버튼이 있고 해당 버튼을 클릭하면 사용자가 현재 활성화된 버튼을 볼 수 있도록 해당 버튼에 포커스를 설정하려고 합니다.

어떤 이유로 콘솔에서는 예상대로 작동합니다. 버튼을 클릭하면 포커스가 추가되고 CSS를 기반으로 배경색이 변경되며, 다른 버튼을 클릭하면 첫 번째 버튼이 포커스를 잃고 새 버튼이 포커스를 받습니다.

콘솔을 열지 않으면 작동하지 않습니다.

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년.초점();
  }
}

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

  1년
  5년
  10년
  20년

Answer 1

우선, 버튼을 클릭하면 이미 포커스가 부여된 것이므로 동적으로 포커스를 부여할 필요가 없습니다.

그럼 배경색은 왜 안 바뀌나요?

왜냐하면 background-image 已经覆盖了 background-color

설정만 하면 됩니다 background 而不是 background-color

으아악

전체 예시, JS

필요 없음

으아악 으아악