jQueryでの複数ボタンの色変更について

現時点でボタン１，２，３がありますがボタン１を押して次にボタン２を押すと色が移るということを行いたいのですが、そのままボタン１も色がついてしまうのを解消したいです。```ここに言語を入力
コード

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>クリックイベントと切り替え</title>
6  <link rel="stylesheet" type="text/css" href="base.css">
7  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <script>
8  $(function(){
9    $('.button').on('click', function() {
10$(this).toggleClass('active');
11  });
12  });
13  </script>
14</head>
15<body>
16  <div id="wrapper">
17    <div id="button1" class="button">
18      <p>button1</p>
19    </div><!-- button1 -->
20    <div id="button2" class="button">
21      <p>button2</p>
22    </div><!-- button2 -->
23    <div id="button3" class="button">
24      <p>button3</p>
25    </div><!-- button3 -->
26  </div><!-- wrapper -->
27</body>
28</html>
29
30```css
31@charset "UTF-8";
32/* reset */
33body, h1, h2, h3, h4, h5, h6, p, address,
34ul, ol, li, dl, dt, dd, img, form, table, tr, th, td {
35  margin: 0;
36  padding: 0;
37  border: none;
38  font-style: normal;
39  font-weight: normal;
40  font-size: 100%;
41  text-align: left;
42  list-style-type: none;
43  border-collapse: collapse;
44}
45
46textarea { font-size: 100%; vertical-align:middle;}
47img { border-style: none; display: block; }
48hr { display: none; }
49em{font-style: normal}
50input{line-height:auto;vertical-align:middle;}
51strong.more{color:#c30}
52a{text-decoration: none;}
53
54html {
55
56}
57
58body {
59  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
60}
61
62* {
63  -webkit-box-sizing: border-box;
64  -moz-box-sizing: border-box;
65  -o-box-sizing: border-box;
66  -ms-box-sizing: border-box;
67  box-sizing: border-box;
68}
69
70/* 上の部分は気にせずここから書く */
71#wrapper {
72  display: flex;
73  justify-content: center;
74  height: 100vh;
75  align-items: center;
76}
77
78.button {
79  margin: 0 20px;
80  width: 320px;
81  height: 180px;
82  background-color: #fdd;
83  cursor: pointer;
84}
85
86.button p {
87  line-height: 180px;
88  font-size: 30px;
89  text-align: center;
90}
91
92.active {
93background-color: #ff5555;
94}
95

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

回答2件

トグルする前に自分以外のボタンからactiveをremoveすればよいです

javascript
1$(function(){
2  $('.button').on('click', function() {
3    $('.button').not(this).removeClass('active');
4    $(this).toggleClass('active');
5  });
6});