クリックされたボタンの色を変更したり、それ以外の色を戻したりしたい

例えばボタンが５つ並んでいるとしてそれの１つをクリックすると色が変わる。
別のボタンをクリックするとそれの色が変わり、最初にクリックしたボタンの色は初期の色に戻る
ホバーではなくクリックしたら色は次のボタンがクリックされるまでそのまま

のようなことCSSで実現したいのですが検索してもなかなか見つからず
助言をいただければと思いこちらに質問させていただきました。
よろしくお願いいたします。

例（ここでは色を変えれないため太字にしてます。）

何もしていない状態
ボタン　ボタン　ボタン　ボタン　ボタン

↓

クリック
ボタン　ボタン　ボタン　ボタン　ボタン

↓

別のボタンをクリック
ボタン　ボタン　ボタン　ボタン　ボタン

↓

さらに別のボタン
ボタン　ボタン　ボタン　ボタン　ボタン

タグにJavaScript, jQueryなどありますが、何が一番実装しやすいのかわからなかったためつけました。
CSSのみで実装できるならそれでCSSのみでお願いいたします。

下記は現在のhtmlソースになります

html
1
2<thead>
3	<tr>
4		<th>
5			<a>A</a>
6			<a>B</a>
7		</th>
8		<th>
9			<a>C</a>
10			<a>D</a>
11		</th>
12		<th>
13			<a>E</a>
14			<a>F</a>
15		</th>
16		<th>
17			<a>G</a>
18			<a>H</a>
19		</th>
20		<th>
21			<a>I</a>
22			<a>J</a>
23		</th>
24	</tr>
25</thead>

退会済みユーザー

2017/11/08 02:21

> CSSで実現したいのですが …　CSSのみで実装ですか？タグにJavaScript, jQueryがありますが、JavaScriptでクラス付与など操作をしてCSSを適用させるということですか？

MeB

2017/11/08 02:28

何が一番実装しやすいのかわからなかったためタグにJavaScript, jQuery追加いたしました。ややこしくなってしまい申し訳ございません。

defghi1977

2017/11/08 02:39

ボタンがありませんよ

MeB

2017/11/08 02:43

ボタンという表現がよくありませんでした。buttomではなくaにcssでボタンっぽく見えるものでした。失礼しました。

行動規範の内容に同意します

回答2件

ベストアンサー

せめてHTMLのソースだけでも貼っていただきたいです。。。

html
1<!DOCTYPE html>
2<html>
3<head>
4<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
5<title>HTML, CSS and JavaScript demo</title>
6</head>
7<body>
8  <button>ボタン</button>
9  <button>ボタン</button>
10  <button>ボタン</button>
11  <button>ボタン</button>
12  <button>ボタン</button>
13</body>
14</html>

cssソース

css
1button {
2  width: 100px;
3  height: 40px;
4  border: 1px solid #ccc;
5  background-color: white;
6  color: #000000;
7}
8
9.active {
10  background-color: red;
11  color: white;
12}

jQueryソース

javascript
1$(function(){
2  var btn = $('button');
3  btn.click(function(){
4    btn.removeClass('active');
5    $(this).addClass('active');
6  });
7});

上記でおそらく実現したいことが出来ると思います。
上記ソースの解説ですが、クリックをすると、.activeというクラスが付与されます。
.activeというクラスにはbackground-color: red;となっているので、付与されると背景色が変わります。
違うボタンをクリックすると、クラスが付与される前にremoveClassで一度activeクラスを外しているので、リセットされ再度クラスの付与が行われます。

こちらであってますでしょうか？

投稿2017/11/08 02:27

編集2017/11/08 02:36

kenny_sayama

総合スコア1036

kenny_sayama

2017/11/08 02:28

CSSだけでという部分を見逃していました。

MeB

2017/11/08 02:33

いえいえ！こちらこそソースも貼らずに申し訳ございません。

kenny_sayama

2017/11/08 02:37

簡単にということであれば、上記ソースが簡単に実現出来るかと思います。 CSSだけでやろうとするとかえってわかりづらくなってしまうかと思います。。。

kenny_sayama

2017/11/08 02:39

上記ソースを　https://liveweave.com/　に貼り付ければ動作確認がすぐに出来ます。

MeB

2017/11/08 02:39

承知しました。ありがとうございます。試してみます！

optimist06

2019/06/13 11:02

自分好みのボタンが何とか作れないかと、あちこち探し回っていたら、こちらにたどり着きました。おかげさまで、自分が作りたいと思っていた通りのボタンが作れました。 http://kassenba.sakura.ne.jp/ 大変感謝しております。ありがとうございました。

行動規範の内容に同意します

label要素とinput[type=radio]要素と隣接セレクタ+,:checked疑似クラスでボタンぽいものを作るとか

HTML
1<style>
2input[type=radio]{
3	display: none;
4}
5:checked + span{
6	font-weight: bold;
7}
8</style>
9<label><input type="radio" name="r"/><span>ボタン</span></label>
10<label><input type="radio" name="r"/><span>ボタン</span></label>
11<label><input type="radio" name="r"/><span>ボタン</span></label>
12<label><input type="radio" name="r"/><span>ボタン</span></label>
13<label><input type="radio" name="r"/><span>ボタン</span></label>