選択されているところに背景色をつけたい

Question

選択されている箇所に背景色を付けたいのですが、どのようにすれば良いのでしょうか？
例えば以下の場合、▷AAA会社をクリックしたら、▷AAA会社の背景色を赤色とかにしたいです。
▷BBB会社や▷CCC会社もそれぞれクリックしたら同様の動きにしたいです。

   <div class="row m-3">
      <div class="col-sm-4 text-center">
        <a href=<%= kaisha_path(kaisha_id: 1) %>id="aaa">▷ AAA会社</a>
      </div>
      <div class="col-sm-4 text-center">
        <a href=<%= kaisha_path(kaisha_id: 2) %>id="aaa">▷ BBB会社</a>
      </div>
      <div class="col-sm-4 text-center">
        <a href=<%= kaisha_path(kaisha_id: 5) %>id="aaa">▷ CCC会社</a>
      </div>
    </div>

Answer 1

idの競合はNGです。
どこの背景を変えたいかによりますね。アンカー自体の背景なのかアンカーをラップするdivの背景なのか・・

<style>
.active{
display:inline-box;
  background-Color:red;
}
</style>
<script>
document.addEventListener('click',e=>{
  const t=e.target;
  if(t.matches('.col-sm-4 > a')){
    t.closest('.row').querySelector('.col-sm-4 > a.active')?.classList.remove('active');
    t.classList.add('active');
  }
});
</script>
<div class="row m-3">
<div class="col-sm-4 text-center">
<a href="#">? AAA会社</a>
</div>
<div class="col-sm-4 text-center">
<a href="#">? BBB会社</a>
</div>
<div class="col-sm-4 text-center">
<a href="#">? CCC会社</a>
</div>
</div>

一度付けた背景をけさない

document.addEventListener('click',e=>{
  const t=e.target;
  if(t.matches('.col-sm-4 > a')){
    t.classList.add('active');
  }
});

Comments

[fufutt_28324]

選択された▷AAA会社の背景を変えたいです。

[yambejp]

回答がそうなっています

[fufutt_28324]

ありがとうございます、できていました。

次々にすみません、選択したら背景色を固定させたい場合はどのようにしたらいいでしょうか

[yambejp]

固定させるとは、他のリンクをクリックしても背景色をもどさないということですか？

[fufutt_28324]

▷AAA会社ページが表示されているときは▷AAA会社の色が固定されている状態にしたいです。

[yambejp]

命題が「▷AAA会社ページが表示されているとき」という仕組みになっていません

Answer 2

id="aaa" を class="aaa" に変更して、.aaa:focus { background:red; } というスタイルを設定しましょう。

Comments

[fufutt_28324]

▷AAA会社から▷BBB会社をクリックしたら、▷BBB会社の背景色だけ変わるようにしたいのですがどうしたらいいでしょうか？

[int32_t]

この回答の方法でそのようになるはずです。