jQueryでのタブ作成

前提・実現したいこと

jqueryでのタブ制作

発生している問題・エラーメッセージ

問題点なのですが、➀初期状態として、menu-aの内容が表示されない
➁タブをクリックした際にクリックしたタブの内容が表示されない、おそらくjQueryの
コードの$(selector).show();という部分が問題だと思われます。

該当のソースコード

HTML
1<body>
2    <div class="tabs-menu">
3      <div id="menu-a">タブa</div>
4      <div id="menu-b">タブb</div>
5      <div id="menu-c">タブc</div>
6    </div>
7    <div class="tabs-content">
8      <div id="content-a">
9        <p>おはよう。</p>
10      </div>
11      <div id="content-b">
12        <p>こんにちは。</p>
13      </div>
14      <div id="content-c">
15        <p>こんばんは。</p>
16      </div>
17    </div>
18</body>

jQuery
1function showTab(selector) {
2    console.log(selector);
3
4    $(".tabs-menu div").removeClass("active");
5    $(".tabs-menu div[id='" + selector + "']").addClass("active");
6    $(".tabs-content > div").hide();
7    $(selector).show();
8}
9
10$(document).ready(function() {
11    showTab("#menu-a");
12
13    $(".tabs-menu div").click(function() {
14        var selector = $(this).attr("id");
15        showTab(selector);
16
17        return false;
18    });
19});
20

試したこと

ネットで調べる、要素の照らし合わせ

補足情報（FW/ツールのバージョンなど）

HTML5

kei344

2019/09/13 16:10

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Lhankor_Mhy

2019/09/14 00:54 編集

showTab("-menu-a"); ↑これは正しいですか？

takuya.ntyon84

2019/09/14 13:34

-はいらないです。すみません

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

回答2件

ベストアンサー

変数selectorに"menu-a"を入れ、その変数で"content-a"を表示しようとしていると思います。
showTab("-menu-a")の他にそこも直しましょう。

javascript
1var selector = "menu-a";
2var selector2 = selector.replace(/menu/, "content"); //"content-a";

$(selector).show();では"menu-a"や"content-a"を表示しないと思います。
そこも直しましょう。

投稿2019/09/14 02:47

querykuma

総合スコア777

idで要素を指定する場合は「#」+「ID名」で指定します。
その為、2か所修正が必要だと思います。

jQuery
1$(document).ready(function() {
2    //showTab("-menu-a");を修正
3    showTab("#menu-a");
4
5    $(".tabs-menu div").click(function() {
6        var selector = $(this).attr("id");
7        //showTab(selector);を修正
8        showTab("#" + selector);
9        return false;
10    });
11});