CSSのactiveについて

Question

前提・実現したいこと

CSSのactiveを指定するとクリックしてる間変化を起こす事ができるのですが、
その変化を維持するにはどうすればいいのでしょうか？

例えば
メニュー1 メニュー2 メニュー3とあった場合に、
クリックしたメニューの背景色を変えて、ほかのメニューをクリックするまで背景色を維持したいです
CSSでできるのでしょうか？
JavaScript使わないと無理でしょうか？

該当のソースコード

<style>
div:hover{
 background-color:blue;
}

div:active{
 background-color:red;
}
</style>


<div>メニュー1</div>
<div>メニュー2</div>
<div>メニュー3</div>

Answer 1

JavaScript使わないと無理でしょうか？

基本的にはそうです。「クリックした状態をラジオボタンで記録させる」ような方法を取ればCSSだけで実装できるかもしれませんが、レイアウトにも制約が生じますので、あまりおすすめはしません。

Answer 2

HTMLとCSSだけの方法と、JavaScriptを用いた方法とがあると思います。

案1. HTML + CSSのみ

<label><input type="radio" name="aaa"><span>メニュー1</span></label>
<label><input type="radio" name="aaa"><span>メニュー2</span></label>
<label><input type="radio" name="aaa"><span>メニュー3</span></label>

label {
  display: block; /* 好きなように設定をしてください */
}
label input[type="radio"] {
  opacity: 0;
  position: absolute;
  /* width、font-size、z-indexなどでラジオボタンを触りにくくする方法を追加してもいいです。 */
}
label span {
  display: block; /* 好きなように設定をしてください */
}
label input[type="radio"] ~ span:hover {
  background-color: blue;
}
label input[type="radio"] ~ span:active,
label input[type="radio"]:checked ~ span {
  background-color: red;
}

---

案2. HTML + CSS + JavaScript

<div>メニュー1</div>
<div>メニュー2</div>
<div>メニュー3</div>

div:hover {
  background-color: blue;
}
div:active,
div.active {
  /* 選択している状態の */
  background-color: red;
}

var elm = document.querySelectorAll('div');
  
for (let i = 0; i < elm.length; i++) {
  elm[i].addEventListener('click', () => {
    // すべてのdivからactiveクラスを削除
    for (let j = 0; j < elm.length; j++) {
      elm[j].classList.remove('active');
    }

    // クリックした要素にactiveクラスを追加
    elm[i].classList.add('active');
  });
}

jQueryなら、for文のない、もう少しシンプルな記述で実装できると思います。

Comments

[退会済みユーザー]

動きました
ありがとうございます
maisumakunさんの言うようにこのソースだとレイアウトにも制約が生じますでしょうか？

[new1ro]

制約が生じることもあると思いますが、工夫次第で回避も可能だとは思います。
(最終的にどのような見た目にしたいのかわからないので断言はできないですが)

タブを横に並べるだけなら、あまり問題はないように思えますが、
基本的にdisplay: block;、display: flex;などの指定には気を払う必要はありそうです。

[退会済みユーザー]

jQueryまでわざわざ書いていただきありがとうございます。
できればCSSのほうで実装したく、考えております。

もし、メニュー1 メニュー2 メニュー3　これが２か所別々の場所にあり、それぞれの中で反応させるにはどうしたらいいでしょうか？

<style>
label {
display: block; /* 好きなように設定をしてください */
}
label input[type="radio"] {
opacity: 0;
position: absolute;
/* width、font-size、z-indexなどでラジオボタンを触りにくくする方法を追加してもいいです。 */
}
label span {
display: block; /* 好きなように設定をしてください */
}
label input[type="radio"] ~ span:hover {
background-color: blue;
}
label input[type="radio"] ~ span:active,
label input[type="radio"]:checked ~ span {
background-color: red;
}
</style>

<label><input type="radio" name="aaa"><span>メニュー1</span></label>
<label><input type="radio" name="aaa"><span>メニュー2</span></label>
<label><input type="radio" name="aaa"><span>メニュー3</span></label>

<label><input type="radio" name="aaa"><span>メニュー1</span></label>
<label><input type="radio" name="aaa"><span>メニュー2</span></label>
<label><input type="radio" name="aaa"><span>メニュー3</span></label>

[退会済みユーザー]

もう一つお聞きしたいのですが、
最初からメニュー1がbackground-color:redの状態にしたいのですが、
下記コードにしたところ、メニュー1の赤色がずっと残る状態となりました
何か方法はありますでしょうか？

<style>
label {
display: block; /* 好きなように設定をしてください */
}
label input[type="radio"] {
opacity: 0;
position: absolute;
/* width、font-size、z-indexなどでラジオボタンを触りにくくする方法を追加してもいいです。 */
}
label span {
display: block; /* 好きなように設定をしてください */
}
label input[type="radio"] ~ span:hover {
background-color: blue;
}
label input[type="radio"] ~ span:active,
label input[type="radio"]:checked ~ span {
background-color: red;
}
</style>

<label style="background-color:red"><input type="radio" name="aaa"><span>メニュー1</span></label>
<label><input type="radio" name="aaa"><span>メニュー2</span></label>
<label><input type="radio" name="aaa"><span>メニュー3</span></label>