質問編集履歴

1

gifの追加、試したことの追加

2020/06/22 11:39

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -14,11 +14,69 @@
14
14
 
15
15
 
16
16
 
17
+ ##試したこと
18
+
19
+ メニュー項目とタブに共通のクラスを持たせて、mouseoverとmouseoutの処理を分け、mouseoutの処理の方に共通のクラスを組み込んだ。
20
+
21
+ ```mouseover
22
+
23
+ menuItems.forEach((mouseoverItem) => {
24
+
25
+ mouseoverItem.addEventListener("mouseover", (e) => {
26
+
27
+ e.preventDefault();
28
+
29
+ menuItems.forEach((item) => {
30
+
31
+ item.classList.remove("active");
32
+
33
+ });
34
+
35
+ mouseoverItem.classList.add("active");
36
+
37
+ tabContents.forEach((content) => {
38
+
39
+ content.classList.remove("active");
40
+
41
+ });
42
+
43
+ document.getElementById(mouseoverItem.dataset.id).classList.add("active");
44
+
45
+ });
46
+
47
+ });
48
+
49
+
50
+
51
+ ```
52
+
53
+ ```mouseout
54
+
55
+ document.getElementById("tabMenu")
56
+
57
+ .forEach((mouseoutItem) => {
58
+
59
+ mouseoutItem.addEventListener("mouseout", () => {
60
+
61
+ mouseoutItem.classList.remove("active");
62
+
63
+ document.getElementById(mouseoutItem.dataset.id).classList.remove("active");
64
+
65
+ });
66
+
67
+ });
68
+
69
+
70
+
71
+ ```
72
+
73
+
74
+
17
75
  ---
18
76
 
19
77
 
20
78
 
21
- ![メニュ項目とタブ](cad7b1c942b99f678e0b9764de90d400.png)
79
+ ![メージ説明](289a2210fd0c53fbe85f9fc6477162c3.gif)
22
80
 
23
81
 
24
82
 
@@ -106,7 +164,111 @@
106
164
 
107
165
  ---
108
166
 
109
-
167
+ ```CSS
168
+
169
+
170
+
171
+ body {
172
+
173
+ font-size: 14px;
174
+
175
+ }
176
+
177
+
178
+
179
+ .menuContainer {
180
+
181
+ margin: 30px auto;
182
+
183
+ width: 500px;
184
+
185
+ }
186
+
187
+
188
+
189
+ .menu {
190
+
191
+ list-style: none;
192
+
193
+ padding: 0;
194
+
195
+ margin: 0;
196
+
197
+ display: flex;
198
+
199
+ }
200
+
201
+
202
+
203
+ .menu li a {
204
+
205
+ display: inline-block;
206
+
207
+ width: 100px;
208
+
209
+ text-align: center;
210
+
211
+ padding: 8px 0;
212
+
213
+ color: #333;
214
+
215
+ text-decoration: none;
216
+
217
+ border-radius: 4px 4px 0 0;
218
+
219
+ transition: 0.4s;
220
+
221
+ }
222
+
223
+
224
+
225
+ .menu li a.active {
226
+
227
+ background: #333;
228
+
229
+ color: #fff;
230
+
231
+ }
232
+
233
+ .menu li a:not(.active):hover {
234
+
235
+ /* aのactiveでないものをホバーしたとき */
236
+
237
+ opacity: 0.5;
238
+
239
+ transition: opacity 0.4s;
240
+
241
+ }
242
+
243
+ .tabContent.active {
244
+
245
+ background: #333;
246
+
247
+ color: #fff;
248
+
249
+ min-height: 150px;
250
+
251
+ padding: 12px;
252
+
253
+ display: block;
254
+
255
+ }
256
+
257
+ .tabContent {
258
+
259
+ display: none;
260
+
261
+ }
262
+
263
+
264
+
265
+
266
+
267
+ ```
268
+
269
+
270
+
271
+ ---
110
272
 
111
273
 
112
274