質問編集履歴

1

自作の(未完成JavaScript)コードの追加

2021/04/30 09:39

投稿

mmmmmmmmmmmmmm
mmmmmmmmmmmmmm

スコア14

test CHANGED
File without changes
test CHANGED
@@ -201,3 +201,109 @@
201
201
 
202
202
 
203
203
  ```
204
+
205
+ ```JavaScript
206
+
207
+ /**
208
+
209
+ * selectorに該当するタブを表示する関数
210
+
211
+ */
212
+
213
+ const showTab = (selector) => {
214
+
215
+ // 引数selectorの中身をコンソールで確認する
216
+
217
+ console.log(selector);
218
+
219
+
220
+
221
+ /* 1. タブの選択状態のリセット*/
222
+
223
+
224
+
225
+ // いったん、すべての.tabs-menu > divからactiveクラスを削除する
226
+
227
+ $('.tabs-menu > div').removeClass('active');
228
+
229
+
230
+
231
+ // いったん、すべての.tabs-content > divを非表示にする
232
+
233
+ $('.tabs-content > div').hide();
234
+
235
+
236
+
237
+ // 2. 選択されたタブの表示
238
+
239
+
240
+
241
+ //.tabs-menu divのうち、selectorに該当するものにだけactiveクラスをつける
242
+
243
+
244
+
245
+ if (selector === 'tab-menu-a') {
246
+
247
+ $('p').show();
248
+
249
+
250
+
251
+ } else if (selector === 'tab-menu-b') {
252
+
253
+
254
+
255
+
256
+
257
+ } else if (selector === 'tab-menu-c') {
258
+
259
+
260
+
261
+
262
+
263
+ };
264
+
265
+
266
+
267
+ $(`.tabs-menu div[id="${selector}"]`)
268
+
269
+ .addClass('active');
270
+
271
+
272
+
273
+
274
+
275
+ $(selector).show();
276
+
277
+ };
278
+
279
+
280
+
281
+
282
+
283
+ // タブがクリックされたらコンテンツ表示
284
+
285
+ $('.tabs-menu div').on('click', (e) => {
286
+
287
+ //idの値を受け取った後、showTab()関数に渡す。e.targetはクリックされたタブ(.tabs-menu div)を表す
288
+
289
+ const selector = $(e.target).attr('id');
290
+
291
+ showTab(selector);
292
+
293
+
294
+
295
+ });
296
+
297
+
298
+
299
+ //初期状態として1番目のタブを表示
300
+
301
+ showTab('tab-menu-a');
302
+
303
+
304
+
305
+ ```
306
+
307
+ JavaScriptは途中までしかできてません(´;ω;`)
308
+
309
+ 特にif文のところがうまくできません。