Tulis semula tajuk kepada: Fokus pada perkara yang dilakukan oleh butang konsol, bukan kawasan lain

Question

Saya mempunyai 4 butang dan apabila ia diklik, saya cuba menetapkan fokus padanya supaya pengguna boleh melihat butang yang sedang aktif.

Atas sebab tertentu dalam konsol ia berfungsi seperti yang diharapkan, apabila butang diklik ia menambah fokus, menukar warna latar belakang berdasarkan CSS, kemudian apabila butang lain diklik butang pertama hilang fokus , butang baharu mendapat fokus.

Ia tidak berfungsi apabila saya tidak membuka konsol.

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

fungsi tukarTarikh(tarikh) {

  jika (tarikh === 1) {
    oneYear.className += "aktif";
    setTimeout(oneYear.focus(), 1);
  }
  jika (tarikh === 5) {
    fiveYear.focus();
    fiveYear.className += "aktif";
  }
  jika (tarikh === 10) {
    tenYear.focus();
  }
  jika (tarikh === 20) {
    twentyYear.focus();
  }
}

.theme-dark-btn {
  peralihan: semua kemudahan 1s;
  imej latar belakang: kecerunan linear(ke kiri, #1ACC8D, #1ACC8D, #235FCD, #1C4CA3);
  saiz latar belakang: 300%;
  kedudukan latar belakang: 0 0;
  sempadan: 1px pepejal #1C4CA3;
  berat fon: 600;
  jarak huruf: 1px;
}

.theme-dark-btn:hover {
  kedudukan latar belakang: 100% 0;
  sempadan: 1px pepejal #1ACC8D;
}

.theme-dark-btn:fokus {
  warna latar belakang: #1ACC8D;
}

.theme-dark-btn:active {
  warna latar belakang: #1ACC8D;
}

.btn {
  ketinggian: 38px;
  ketinggian garis: 35px;
  text-align: tengah;
  pelapik: 0 18px;
  text-transform: huruf besar;
  peralihan: imej latar belakang .3s linear;
  peralihan: kotak-bayang .3s linear;
  -webkit-border-radius: 20px;
  -jejari-sempadan-moz: 20px;
  jejari sempadan: 20px;
  saiz fon: 12px !penting;
}

.btn:fokus {
  warna latar belakang: #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

Pertama sekali, apabila anda mengklik butang, anda sudah memberikan fokus, anda tidak perlu memberikan fokus secara dinamik.

Jadi, kenapa warna latar belakang tidak berubah?

Sebab background-image 已经覆盖了 background-color

Anda hanya perlu set background 而不是 background-color

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

Contoh penuh, tidak JS

diperlukan

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