回答編集履歴

1 htmlソースに追記

kenny_sayama

kenny_sayama score 1017

2017/11/08 11:35  投稿

せめてHTMLのソースだけでも貼っていただきたいです。。。
```html
<button>ボタン</button>
<button>ボタン</button>
<button>ボタン</button>
<button>ボタン</button>
<button>ボタン</button>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
 <button>ボタン</button>
 <button>ボタン</button>
 <button>ボタン</button>
 <button>ボタン</button>
 <button>ボタン</button>
</body>
</html>
```
cssソース
```css
button {
 width: 100px;
 height: 40px;
 border: 1px solid #ccc;
 background-color: white;
 color: #000000;
}
.active {
 background-color: red;
 color: white;
}
```
jQueryソース
```javascript
$(function(){
 var btn = $('button');
 btn.click(function(){
   btn.removeClass('active');
   $(this).addClass('active');
 });
});
```
上記でおそらく実現したいことが出来ると思います。
上記ソースの解説ですが、クリックをすると、`.active`というクラスが付与されます。
`.active`というクラスには`background-color: red;`となっているので、付与されると背景色が変わります。
違うボタンをクリックすると、クラスが付与される前に`removeClass`で一度`active`クラスを外しているので、リセットされ再度クラスの付与が行われます。
こちらであってますでしょうか?

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る