jQueryで以下のように記述したのですが、main.js内のif文の記述がうまくいかずconsoleでうまくタブそれぞれの内容が表示されません。

HTML
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>JavaScript Test</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="tabs-menu">
    <div id="tab-menu-a">タブa</div>
    <div id="tab-menu-b">タブb</div>
    <div id="tab-menu-c">タブc</div>
  </div>
  <div class="tabs-content">
    <div id="tabs-a">
      <p>タブaの内容が入ります。</p>
    </div>
    <div id="tabs-b">
      <p>タブbの内容が入ります。</p>
    </div>
    <div id="tabs-c">
      <p>タブcの内容が入ります。</p>
    </div>
  </div>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="main.js"></script>
</body>

</html>

CSS

/* ページ全体での文字色の設定 */
body {
  color: #3f4548;
}

/* divのデフォルトスタイルを消去 */
.tabs-menu {
  margin: 0;
  padding: 0;
}

/* タブの基本スタイル */
.tabs-menu div {
  display: block;
  float: left;
  padding: 10px 20px;
  margin-right: 8px;
  margin-bottom: -1px;
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
  border-radius: 4px 4px 0 0;
  color: #557f95;
  text-decoration: none;
  cursor: pointer;
  /* 各プロパティをふわっと変える演出 */
  transition: all 0.15s;
}

/* 非選択のタブにマウスカーソルを乗せたら色を変える（追記してください） */
.tabs-menu div:not(.active):hover {
  border-color: #f0f0f0 #f0f0f0 #999;
  background-color: #f0f0f0;
}

/* 選択中のタブ */
.tabs-menu .active {
  color: #3f4548;
  border-color: #999 #999 transparent #999;
  background-color: #fff;
}

/* タブコンテンツ表示エリア */
.tabs-content {
  clear: both;
  border: 1px solid #999;
  border-radius: 0 4px 4px 4px;
  padding: 10px;
}

/* 各タブのコンテンツはデフォルトで非表示 */
.tabs-content > div {
  display: none;
}

main.js

const showTab = (selector) => {
  // 引数selectorの中身をコンソールで確認する
  console.log(selector);

  $(".tabs-menu > div").removeClass("active");

  $(".tabs-content > div").hide();

  $(`.tabs-menu div[id="${selector}"]`)
    .addClass('active');

  if (selector === "tab-menu-a") {
    $("tabs-a").show();
  }
  else if (selector === "tab-menu-b") {
    $("tabs-b").show();
  }
  else if (selector === "tab-menu-c") {
    $("tab-c").show();
  }

  
  $(selector).show();
};
 

// タブがクリックされたらコンテンツを表示
$(".tabs-menu div").on("click", (e) => {
  const selector = $(e.target).attr('id');
  showTab(selector);
  
   
});


// 初期状態として1番目のタブを表示
showTab('#tab-menu-a');

＊main.jsを以下のように変更したらうまくいったのですが、ほかにif文を使って表示する方法はありますか？？





const showTab = (selector) => {
  // 引数selectorの中身をコンソールで確認する
  console.log(selector);

  $(".tabs-menu > div").removeClass("active");

  $(".tabs-content > div").hide();

  $(`.tabs-menu div[id="${selector}"]`)
    .addClass('active');
  let tabs = "";
    
  if (selector === "tab-menu-a") {
    tabs = "tabs-a";
  }
  else if (selector === "tab-menu-b") {
    tabs = "tabs-b";
  }
  else if (selector === "tab-menu-c") {
    tabs = "tabs-c";
  }
  
  $("#" + tabs).show();
};
 

// タブがクリックされたらコンテンツを表示
$(".tabs-menu div").on("click", (e) => {
  const selector = $(e.target).attr('id');
  showTab(selector);
  
   
});

m.ts10806

2021/01/23 23:15

折角法則があるんですから、if使わない方法考えた方がいいですね。タブ増えたらどうします？

naoya0922

2021/01/23 23:25

お返事ありがとうございます！たくさんあったらいちいｔif文書くの大変ですね！あと、法則とはなんでしょうか？よろしくお願いいたします。

m.ts10806

2021/01/23 23:39

tab-menu-a→tabs-a tab-menu-b→tabs-b 変わってるのはa,bのみ。これを「法則」というか、「規則性」と言った方がいいですね。「その部分だけ動的に変わる」という規則性がある。一般的なプラグインはそのあたりを吸収するように作られています。もちろんその規則性を守らせるための実装ルールがあるのですけど。

naoya0922

2021/01/23 23:42

なるほどですね！例えば、sliceとかですか？

m.ts10806

2021/01/23 23:48

「例えば」が何を意図してsliceを持ってこられたのか分かりません。

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

回答2件

main.js内のif文の記述がうまくいかずconsoleでうまくタブそれぞれの内容が表示されません。

タブの中身が表示されないのは、jQueryにおけるid属性の指定方法が間違っているからですね。

コード内に試行錯誤の形跡が見られるので既にご存じの事と思いますが
こういうDIVタグがある場合

html
1<div id="hoge">あああ</div>

jQueryでのDIVタグの取り方はこうです。

js
1$('#hoge')

それを踏まえて失敗している方のmain.jsの中身を見ると、
なぜif文の中のshow()が効いていないのかに気が付けると思います。

ここでせっかく出力しているのでよく見てみるといいと思います。

js
1// 引数selectorの中身をコンソールで確認する
2console.log(selector);

動作コードは裏で書いていますがまずはヒントに留めます。
頑張ってください。

追記

こう解決したとかなかったんで、単に中身が欲しかったと解釈したのでコードを追記します。

jsfiddleで確認する

https://jsfiddle.net/uLmyc3br/1/

レビューしたコード

js
1const showTab = (selector) => {
2  // 引数selectorの中身をコンソールで確認する
3  console.log(selector);
4
5  // TIPS: 同じ個所を操作する実装はなるべく固めよう
6  // tab-menuの操作をまとめる。分散させると全体に神経を使うので疲れる。
7  $(".tabs-menu > div").removeClass("active");
8  $(`.tabs-menu div[id="${selector}"]`).addClass('active');
9
10  // 同様にtabsの操作をまとめる
11  $(".tabs-content > div").hide();
12  $(`.tabs-content div[id="tabs-${selector.slice(-1)}"]`).show();
13
14  // なぜtabs-menuは動的にselector変数で処理しているのにtabsはifなのか？
15  // 同じように実装した方が統一感があってキレイだ
16  // if (selector === "tab-menu-a") {
17  //   $("#tabs-a").show();
18  // }
19  // else if (selector === "tab-menu-b") {
20  //   $("#tabs-b").show();
21  // }
22  // else if (selector === "tab-menu-c") {
23  //   $("#tab-c").show();
24  // }
25
26  // TIPS: 無駄なコードは書かない
27  // これの有無で動作に違いはない。大体hide()している箇所ないし
28  // $("#" + selector).show();
29};
30
31// タブがクリックされたらコンテンツを表示
32$(".tabs-menu div").on("click", (e) => {
33  const selector = $(e.target).attr('id');
34  showTab(selector);
35});
36
37// 初期状態として1番目のタブを表示
38showTab('tab-menu-a');

その他

ヒアドキュメント部分はこう直そうかどうか迷ったけど、clickイベント起動なのでパフォーマンスにそこまで影響しないだろうからそのままにした。基本的には"+"で連結した方が動作は早い。

js
1$(".tabs-menu > div").removeClass("active");
2$('.tabs-menu div[id="' + selector + '"]').addClass('active');
3
4$(".tabs-content > div").hide();
5$('.tabs-content div[id="tabs-' + selector.slice(-1) + '"]').show();

追記2

これでこの質問への回答は最後にします。
どうしてもif文にしたいならこうですね。元のif文を維持するのは統一感がなくて正直嫌なので変えます。
もし、部下からのレビューで来たらキレる自信があります。

js
1const showTab = (selector) => {
2  // 引数selectorの中身をコンソールで確認する
3  console.log(selector);
4
5  $(".tabs-menu > div").removeClass("active");
6  $(".tabs-content > div").hide();
7
8  if (selector === "tab-menu-a") {
9    $("#tab-menu-a").addClass('active');
10    $("#tabs-a").show();
11  }
12  else if (selector === "tab-menu-b") {
13    $("#tab-menu-b").addClass('active');
14    $("#tabs-b").show();
15  }
16  else if (selector === "tab-menu-c") {
17    $("#tab-menu-c").addClass('active');
18    $("#tabs-c").show();
19  }
20};
21
22
23// タブがクリックされたらコンテンツを表示
24$(".tabs-menu div").on("click", (e) => {
25  const selector = $(e.target).attr('id');
26  showTab(selector);
27});
28
29// 初期状態として1番目のタブを表示
30showTab('tab-menu-a');
31
32// $(".tabs-menu div").on("click", (e) => {…}) でselectorはtab-menuだからこの指定はダメ
33// 関数もmenuを取るようにしか作っていないでしょう？
34// showTab('#tabs-a');

投稿2021/01/23 14:06

編集2021/01/24 13:50

退会済みユーザー

総合スコア0

naoya0922

2021/01/24 12:22

sliceを使えばもっと簡単になるんですね！ちなみにですが、以下のif文のままで初期状態でtabs-aの内容を表示させる方法ってあるのでしょうか？ ``` const showTab = (selector) => { // 引数selectorの中身をコンソールで確認する console.log(selector); $(".tabs-menu > div").removeClass("active"); $(".tabs-content > div").hide(); $(`.tabs-menu div[id="${selector}"]`) .addClass('active'); if (selector === "tab-menu-a") { $("#tabs-a").show(); } else if (selector === "tab-menu-b") { $("#tabs-b").show(); } else if (selector === "tab-menu-c") { $("#tabs-c").show(); } $(selector).show(); }; // タブがクリックされたらコンテンツを表示 $(".tabs-menu div").on("click", (e) => { const selector = $(e.target).attr('id'); showTab(selector); }); // 初期状態として1番目のタブを表示 showTab('#tabs-a'); ```

退会済みユーザー

2021/01/24 13:32

if文を維持するやりようはいくらでもありますが、貼っていただいたコードだとタブの中身は表示できても、タブ自身の表示はダメですね。関数のつくりがもともとタブ（tab-menu-x）を取る想定のようなので、初期表示をするための【showTab("#tabs-a")】は悪手です。【[tab-menu]と[tabs]は混ぜるな危険】です。最初にa～cのどれを選択したのかを渡すようにした方がいいでしょう。

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

ベストアンサー

まずもともとのスクリプトが動かない原因です。
id指定なので書き換え前の

$("tabs-a").show();

では対象が指定できていないので、

$("#tabs-a").show();

と記載します。

IF文にこだわるのであれば今のような処理分岐で問題ないと思います。
他の表現方法では以下のようにtabクリック時に表示する要素のidをcontentという属性で保持すると
分岐が不要になるもしくはundefinedのチェックだけになるので
よりシンプルになると
考えられます。

HTML

<body>
  <div class="tabs-menu">
    <div id="tab-menu-a" content="tabs-a">タブa</div>
    <div id="tab-menu-b" content="tabs-b">タブb</div>
    <div id="tab-menu-c" content="tabs-c">タブc</div>
  </div>
  <div class="tabs-content">
    <div id="tabs-a">
      <p>タブaの内容が入ります。</p>
    </div>
    <div id="tabs-b">
      <p>タブbの内容が入ります。</p>
    </div>
    <div id="tabs-c">
      <p>タブcの内容が入ります。</p>
    </div>
  </div>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="main.js"></script>
</body>

</html>

script

const showTab = (selector) => {
  // 引数selectorの中身をコンソールで確認する
  console.log(selector);

  $(".tabs-menu > div").removeClass("active");

  $(".tabs-content > div").hide();

  selector.addClass('active');
  $(`#${selector.attr('content')}`).show();
};


// タブがクリックされたらコンテンツを表示
$(".tabs-menu div").on("click", (e) => {
  const selector = $(e.target);
  showTab(selector);
});


// 初期状態として1番目のタブを表示
showTab($('#tab-menu-a'));

投稿2021/01/23 14:03

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

jQueryでタブを作る　if文の記述

追記

jsfiddleで確認する

レビューしたコード

その他

追記2

関連した質問