タイトルを次のように書き換えます: 他の領域ではなく、コンソール ボタンの機能に焦点を当てる
<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>
