jQueryを使ってタブ制作

JavaScript(jQuery)のコード分かる方お願いします。

以下の2つのコードを使わなければなりません。
(※HTMLのコードは新規追記は厳禁)
![

完成イメージはこいう感じです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <title>JavaScript Test</title>
7  <link rel="stylesheet" href="main.css">
8</head>
9
10<body>
11  <div class="tabs-menu">
12    <div id="tab-menu-a">タブa</div>
13    <div id="tab-menu-b">タブb</div>
14    <div id="tab-menu-c">タブc</div>
15  </div>
16  <div class="tabs-content">
17    <div id="tabs-a">
18      <p>タブaの内容が入ります。</p>
19    </div>
20    <div id="tabs-b">
21      <p>タブbの内容が入ります。</p>
22    </div>
23    <div id="tabs-c">
24      <p>タブcの内容が入ります。</p>
25    </div>
26  </div>
27
28  <!-- jQuery -->
29  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
30  <script src="main.js"></script>
31</body>
32
33</html>

CSS
1/* ページ全体での文字色の設定 */
2body {
3  color: #3f4548;
4}
5
6/* divのデフォルトスタイルを消去 */
7.tabs-menu {
8  margin: 0;
9  padding: 0;
10}
11
12/* タブの基本スタイル */
13.tabs-menu div {
14  display: block;
15  float: left;
16  padding: 10px 20px;
17  margin-right: 8px;
18  margin-bottom: -1px;
19  border-style: solid;
20  border-width: 1px;
21  border-color: transparent;
22  border-radius: 4px 4px 0 0;
23  color: #557f95;
24  text-decoration: none;
25  cursor: pointer;
26  /* 各プロパティをふわっと変える演出 */
27  transition: all 0.15s;
28}
29
30/* 非選択のタブにマウスカーソルを乗せたら色を変える（追記してください） */
31.tabs-menu div:not(.active):hover {
32  border-color: #f0f0f0 #f0f0f0 #999;
33  background-color: #f0f0f0;
34
35}
36
37/* 選択中のタブ */
38.tabs-menu .active {
39  color: #3f4548;
40  border-color: #999 #999 transparent #999;
41  background-color: #fff;
42}
43
44/* タブコンテンツ表示エリア */
45.tabs-content {
46  clear: both;
47  border: 1px solid #999;
48  border-radius: 0 4px 4px 4px;
49  padding: 10px;
50}
51
52/* 各タブのコンテンツはデフォルトで非表示 */
53.tabs-content > div {
54  display: none;
55}
56

JavaScript
1/**
2 * selectorに該当するタブを表示する関数
3 */
4const showTab = (selector) => {
5    // 引数selectorの中身をコンソールで確認する
6    console.log(selector);
7
8    /* 1. タブの選択状態のリセット*/
9    
10    //　いったん、すべての.tabs-menu > divからactiveクラスを削除する
11    $('.tabs-menu > div').removeClass('active');
12    
13    //　いったん、すべての.tabs-content > divを非表示にする
14    $('.tabs-content > div').hide();
15    
16    //　2. 選択されたタブの表示
17    
18    //.tabs-menu divのうち、selectorに該当するものにだけactiveクラスをつける
19    
20    if (selector === 'tab-menu-a') {
21        $('p').show();
22        
23    } else if (selector === 'tab-menu-b') {
24        
25        
26    } else if (selector === 'tab-menu-c') {
27    
28        
29    };
30    
31    $(`.tabs-menu div[id="${selector}"]`)
32        .addClass('active');
33        
34    
35    $(selector).show();
36};
37    
38
39//　タブがクリックされたらコンテンツ表示
40$('.tabs-menu div').on('click', (e) => {
41    //idの値を受け取った後、showTab()関数に渡す。e.targetはクリックされたタブ（.tabs-menu div）を表す
42    const selector = $(e.target).attr('id');
43    showTab(selector);
44    
45});
46
47//初期状態として1番目のタブを表示
48showTab('tab-menu-a');
49

JavaScriptは途中までしかできてません(´;ω;｀)
特にif文のところがうまくできません。

m.ts10806

2021/04/30 09:06

質問ではなく作業依頼になってます。 https://teratail.com/help/question-tips

miyabi_pudding

2021/04/30 09:15

まずは自身でJSを書いてみて、それでもわからないって部分を聞く質問にしましょう。その際、自身のJSコードも載せてください。

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

回答1件

ベストアンサー

下記でどうでしょう。

jQuery
1$(function() {
2  $('.tabs-menu > div').click(function() {
3    $(this).addClass("active")
4           .siblings().removeClass("active");
5    $('.tabs-content>div').eq($(this).index()).fadeIn()
6                          .siblings().hide();    
7  });
8});