Schreiben Sie den Titel um: Konzentrieren Sie sich auf die Funktion der Konsolentasten und nicht auf andere Bereiche

Question

Ich habe 4 Schaltflächen und wenn darauf geklickt wird, versuche ich, den Fokus auf sie zu legen, damit der Benutzer die aktuell aktive Schaltfläche sehen kann.

Aus irgendeinem Grund funktioniert es in der Konsole wie erwartet: Wenn auf eine Schaltfläche geklickt wird, wird der Fokus hinzugefügt, die Hintergrundfarbe wird basierend auf CSS geändert. Wenn dann auf eine andere Schaltfläche geklickt wird, verliert die erste Schaltfläche den Fokus und die neue Schaltfläche erhält den Fokus.

Es funktioniert nicht, wenn ich die Konsole nicht geöffnet habe.

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

Funktion changeDate(date) {

  if (Datum === 1) {
    oneYear.className += "aktiv";
    setTimeout(oneYear.focus(), 1);
  }
  if (Datum === 5) {
    fiveYear.focus();
    fiveYear.className += "aktiv";
  }
  if (Datum === 10) {
    tenYear.focus();
  }
  if (Datum === 20) {
    twentyYear.focus();
  }
}

.theme-dark-btn {
  Übergang: alle Leichtigkeit 1s;
  Hintergrundbild: linearer Farbverlauf (nach links, #1ACC8D, #1ACC8D, #235FCD, #1C4CA3);
  Hintergrundgröße: 300 %;
  Hintergrundposition: 0 0;
  Rand: 1px einfarbig #1C4CA3;
  Schriftstärke: 600;
  Buchstabenabstand: 1px;
}

.theme-dark-btn:hover {
  Hintergrundposition: 100 % 0;
  Rand: 1 Pixel durchgehend #1ACC8D;
}

.theme-dark-btn:focus {
  Hintergrundfarbe: #1ACC8D;
}

.theme-dark-btn:active {
  Hintergrundfarbe: #1ACC8D;
}

.btn {
  Höhe: 38px;
  Zeilenhöhe: 35px;
  Textausrichtung: Mitte;
  Polsterung: 0 18px;
  Texttransformation: Großbuchstaben;
  Übergang: Hintergrundbild .3s linear;
  Übergang: Box-Shadow .3s linear;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  Randradius: 20px;
  Schriftgröße: 12px !important;
}

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

<div class="col">
  <button class="btn theme-dark-btn" type="button" style="color: white" id="1Year" onclick="changeDate(1)" Autofokus>1 Jahr</button>
  <button class="btn theme-dark-btn" style="color: white" id="5Year" onclick="changeDate(5)">5 Jahre</button>
  <button class="btn theme-dark-btn" style="color: white" id="10Year" onclick="changeDate(10)">10 Jahre</button>
  <button class="btn theme-dark-btn" style="color: white" id="20Year" onclick="changeDate(20)">20 Jahre</button>
</div>

Answer 1

首先，当你点击按钮时，你已经使其获得了焦点，你不需要动态地使其获得焦点。

所以，为什么背景颜色没有改变呢？

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