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

Question

ボタンが 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;
}

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

Answer 1

まず第一に、ボタンをクリックすると、すでにフォーカスが設定されているため、動的にフォーカスを設定する必要はありません。

それでは、なぜ背景色が変わらないのでしょうか?

background-image はすでに background-color

をカバーしているためです。

background-color の代わりに background

を設定するだけです。 リーリー

完全な例、必要ありません JS

リーリー リーリー