タイトルを次のように書き換えます: 他の領域ではなく、コンソールボタンの機能に焦点を当てる-PHP中国語ネットワークQ&A

ボタンが 4 つあり、それらがクリックされたときに、ユーザーが現在アクティブなボタンを確認できるように、ボタンにフォーカスを設定しようとしています。

何らかの理由で、コンソールでは期待どおりに動作します。ボタンをクリックするとフォーカスが追加され、CSS に基づいて背景色が変更されます。その後、別のボタンをクリックすると、最初のボタンがフォーカスを失い、新しいボタンがフォーカスを取得します。

コンソールが開いていないと動作しません。

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(); } }

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