回答編集履歴

2

解決するためのソースコードを追加しました。

2020/06/04 12:49

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -19,6 +19,8 @@
19
19
 
20
20
 
21
21
  ---
22
+
23
+ [CodePenで実装してみました。](https://codepen.io/new1ro/pen/GRogoPr)
22
24
 
23
25
  以下のように実装すると、問題が解決できそうです。
24
26
 
@@ -112,6 +114,30 @@
112
114
 
113
115
  }
114
116
 
117
+
118
+
119
+ // 見た目を調整するため追加。不要なら消してください。
120
+
121
+ .switch-group {
122
+
123
+ margin: 100px 0;
124
+
125
+ display: flex;
126
+
127
+ justify-content: center;
128
+
129
+
130
+
131
+ li {
132
+
133
+ margin: 0 auto;
134
+
135
+ display: block;
136
+
137
+ }
138
+
139
+ }
140
+
115
141
  ```
116
142
 
117
143
 

1

修正

2020/06/04 12:49

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -15,3 +15,129 @@
15
15
  </div>
16
16
 
17
17
  ```
18
+
19
+
20
+
21
+ ---
22
+
23
+ 以下のように実装すると、問題が解決できそうです。
24
+
25
+
26
+
27
+ ```HTML
28
+
29
+ <ul class="switch-group">
30
+
31
+ <li id="switch-01">
32
+
33
+ <div class="setup-action__switch">
34
+
35
+ <div class="setup-action__switch-body">
36
+
37
+ <div class="setup-action__switch-body-a"></div>
38
+
39
+ <div class="setup-action__switch-body-b"></div>
40
+
41
+ </div>
42
+
43
+ </div>
44
+
45
+ </li>
46
+
47
+ <li id="switch-02">
48
+
49
+ <div class="setup-action__switch">
50
+
51
+ <div class="setup-action__switch-body">
52
+
53
+ <div class="setup-action__switch-body-a"></div>
54
+
55
+ <div class="setup-action__switch-body-b"></div>
56
+
57
+ </div>
58
+
59
+ </div>
60
+
61
+ </li>
62
+
63
+ <li id="switch-03">
64
+
65
+ <div class="setup-action__switch">
66
+
67
+ <div class="setup-action__switch-body">
68
+
69
+ <div class="setup-action__switch-body-a"></div>
70
+
71
+ <div class="setup-action__switch-body-b"></div>
72
+
73
+ </div>
74
+
75
+ </div>
76
+
77
+ </li>
78
+
79
+ </ul>
80
+
81
+ ```
82
+
83
+
84
+
85
+ ```SCSS
86
+
87
+ // 変更箇所。
88
+
89
+ // .is-activeに集約。「.is-active-a」と「.is-active-b」は削除
90
+
91
+
92
+
93
+ // .is-active-a {
94
+
95
+ .is-active .setup-action__switch-body-a {
96
+
97
+ /* 選択時スイッチ */
98
+
99
+ background-color: #dc143c;
100
+
101
+ }
102
+
103
+
104
+
105
+ // .is-active-b {
106
+
107
+ .is-active .setup-action__switch-body-b {
108
+
109
+ /* 選択時スイッチ */
110
+
111
+ background-color: #ff0000
112
+
113
+ }
114
+
115
+ ```
116
+
117
+
118
+
119
+ ```jQuery
120
+
121
+ /* スイッチクリックアクション */
122
+
123
+ $(function(){
124
+
125
+ $('.setup-action__switch-body').on('click', function(event){
126
+
127
+ event.preventDefault();
128
+
129
+ $(this).toggleClass('is-active');
130
+
131
+
132
+
133
+ // .is-activeに集約するため、「.is-active-a」と「.is-active-b」は削除
134
+
135
+ // $('#a').toggleClass('is-active-a');
136
+
137
+ // $('#b').toggleClass('is-active-b');
138
+
139
+ });
140
+
141
+ });
142
+
143
+ ```