<p>ボタンが 4 つあり、それらがクリックされたときに、ユーザーが現在アクティブなボタンを確認できるように、ボタンにフォーカスを設定しようとしています。 </p> <p>何らかの理由で、コンソールでは期待どおりに動作します。ボタンをクリックするとフォーカスが追加され、CSS に基づいて背景色が変更されます。その後、別のボタンをクリックすると、最初のボタンがフォーカスを失い、新しいボタンがフォーカスを取得します。 </p> <p>コンソールが開いていないと動作しません。 </p> <p> <pre class="brush:js;toolbar:false;">const oneyear = document.getElementById('1year'); const fouryear = document.getElementById('5year'); const tenyear = document.getElementById('10year'); const二十年 = document.getElementById('20年'); 関数changeDate(日付) { if (日付 === 1) { oneyear.className = "アクティブ"; setTimeout(oneyear.focus(), 1); } if (日付 === 5) { 5年.focus(); Fiveyear.className = "アクティブ"; } if (日付 === 10) { tenyear.focus(); } if (日付 === 20) { 20年.focus(); } }</pre> <pre class="brush:css;toolbar:false;">.theme-dark-btn { トランジション: すべてイーズ 1。 背景画像: 線形グラデーション(左へ、#1ACC8D、#1ACC8D、#235FCD、#1C4CA3); 背景サイズ: 300%; 背景位置: 0 0; 境界線: 1 ピクセルの実線 #1C4CA3; フォントの太さ: 600; 文字間隔: 1px; } .theme-dark-btn:hover { 背景位置: 100% 0; 境界線: 1 ピクセルの実線 #1ACC8D; } .theme-dark-btn:focus { 背景色: #1ACC8D; } .theme-dark-btn:active { 背景色: #1ACC8D; } .btn { 高さ: 38px; 行の高さ: 35px; テキスト整列: 中央; パディング: 0 18px; テキスト変換: 大文字; 遷移: 背景画像 .3 秒の線形; トランジション: ボックスシャドウ .3 秒のリニア。 -webkit-border-radius: 20px; -moz-border-radius: 20px; 境界半径: 20px; フォントサイズ: 12px !重要; } .btn:フォーカス { 背景色: #1ACC8D; }</pre> <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 年</button> <button class="btn主題-dark-btn" style="color:white" id="5年" onclick="changeDate(5)">5年</button> <button class="btntheme-dark-btn" style="color:white" id="10年" onclick="changeDate(10)">10年</button> <button class="btntheme-dark-btn" style="color:white" id="20年" onclick="changeDate(20)">20年</button> </div></pre> </p>