Réécrivez le titre comme suit : concentrez-vous sur ce que font les boutons de la console, pas sur d'autres zones.

Question

J'ai 4 boutons et lorsqu'on clique dessus, j'essaie de me concentrer sur eux afin que l'utilisateur puisse voir le bouton actuellement actif.

Pour une raison quelconque, dans la console, cela fonctionne comme prévu, lorsqu'un bouton est cliqué, il ajoute le focus, change la couleur d'arrière-plan en fonction du CSS, puis lorsqu'un autre bouton est cliqué, le premier bouton perd le focus, le nouveau bouton obtient le focus.

Cela ne fonctionne pas lorsque la console n'est pas ouverte.

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

fonction changementDate(date) {

  si (date === 1) {
    oneYear.className += "actif";
    setTimeout(oneYear.focus(), 1);
  }
  si (date === 5) {
    cinqAnnées.focus();
    fiveYear.className += "actif";
  }
  si (date === 10) {
    dixAnnées.focus();
  }
  si (date === 20) {
    vingtYear.focus();
  }
}</pré>
<pre class="brush:css;toolbar:false;">.theme-dark-btn {
  transition : toutes les facilités 1 ;
  image d'arrière-plan : dégradé linéaire (à gauche, #1ACC8D, #1ACC8D, #235FCD, #1C4CA3) ;
  taille de l'arrière-plan : 300 % ;
  position d'arrière-plan : 0 0 ;
  bordure : 1px solide #1C4CA3 ;
  poids de la police : 600 ;
  espacement des lettres : 1 px ;
}

.theme-dark-btn: survol {
  position d'arrière-plan : 100 % 0 ;
  bordure : 1px solide #1ACC8D ;
}

.theme-dark-btn:focus {
  couleur d'arrière-plan : #1ACC8D ;
}

.theme-dark-btn:actif {
  couleur d'arrière-plan : #1ACC8D ;
}

.btn {
  hauteur : 38px ;
  hauteur de ligne : 35 px ;
  alignement du texte : centre ;
  remplissage : 0 18px ;
  transformation de texte : majuscule ;
  transition : image d'arrière-plan linéaire .3s ;
  transition : box-shadow .3s linéaire ;
  -radius de bordure de kit Web : 20 px ;
  -moz-border-radius : 20px ;
  rayon de bordure : 20 px ;
  taille de police : 12px !important ;
}

.btn:focus {
  couleur d'arrière-plan : #1ACC8D ;
}</pré>
<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 an</button>
  <button class="btn theme-dark-btn" style="couleur : blanc" id="5Year" onclick="changeDate(5)">5 ans</button>
  <button class="btn theme-dark-btn" style="couleur : blanc" id="10Year" onclick="changeDate(10)">10 ans</button>
  <button class="btn theme-dark-btn" style="couleur : blanc" id="20Year" onclick="changeDate(20)">20 ans</button>
</div>

Answer 1

Tout d'abord, lorsque vous cliquez sur le bouton, vous lui donnez déjà le focus, vous n'avez pas besoin de lui donner le focus de manière dynamique.

Alors, pourquoi la couleur d’arrière-plan ne change-t-elle pas ?

Parce que background-image 已经覆盖了 background-color

Il vous suffit de définir background 而不是 background-color

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

Exemple complet, non JS

requis

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