クリック後 背景色を維持したい

Question

他のリンクをクリックするまで背景色を維持したいです
今は、:focusにしていますが、
:active
:focus
:focus-within
:visited
div 要素に対して tabindex 属性を付与する

全部試しましたが上手くいきませんでした。

お分かりになる方いましたら、ご教授願います。

 <div class="row m-3">
      <div class="col-sm-4 text-center">
        <a href=<%= "#" %>>大阪</a>
      </div>
      <div class="col-sm-4 text-center">
        <a href=<%= "#" %>>神奈川</a>
      </div>
      <div class="col-sm-4 text-center">
        <a href=<%= "#" %>>京都</a>
      </div>
    </div>

a:focus {
background-color:green;
}

Comments

[int32_t]

リンクをクリックするとリンク先のページに切り替わって、切り替わり後のページで背景色を変えたいという意図だったりしますか?

問題を再現できる完全な HTML/CSS/JavaScript コードを開示したほうが的確な回答が得られると思いますよ。

[fufutt_28324]

例えば、”大阪”をクリックしたら背景色が緑で固定されて、神奈川か京都をクリックすると”大阪”の背景色はなくなり、神奈川か京都に背景色が固定されるようにしたいです。
説明がわかりずらかったらすみません。

[int32_t]

リンクをクリックしたときにページは切り替わらないのですか?
現在の :focus の方法では何が問題なのですか?

[fufutt_28324]

切り替わります。大阪、神奈川、京都のリンクはどのページのもあります。
現在だとカーソルで押している間は色が変わるのですが、離すと背景色が消えてしまします。

Answer 1

クリックされるページと背景を変えたいページは別のようですので、CSS だけではできないと思います。

複数のページに質問文のようなメニューがあるとして、そのそれぞれのページで以下のようなJavaScriptコードを走らせ、a.current セレクタで背景のスタイルを設定しましょう。

• ページ上の対象の <a> すべてに対して、
• その href プロパティの値が document.URL と等しいなら current クラスを追加する