<p>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. </p> <p>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. </p> <p>Cela ne fonctionne pas lorsque la console n'est pas ouverte. </p> <p> <pre class="brush:js;toolbar:false;">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></pre> </p>

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

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