質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1227閲覧

タブメニューがうまく動きません

samepanda

総合スコア14

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/12/12 15:42

タブメニューがうまく動きません

現在、JavaScriptでタブメニューを実装練習中です。
原因はカウンター変数numの引き継ぎがうまく行っていないことなのではないかと考えたのですが、どうしても動きません。
初学者ゆえ、初歩的な質問かもしれませんが、ご教授お願いいたします。

HTML

1<div> 2 <div> 3 <p class="tab-menu is-active">タブ1</p> 4 <p class="tab-menu">タブ2</p> 5 <p class="tab-menu">タブ3</p> 6 </div> 7 <div class="content is-active"> 8 <p class="content">タブ1コンテンツ</p> 9 </div> 10 <div class="content"> 11 <p class="content">タブ2コンテンツ</p> 12 </div> 13 <div class="content"> 14 <p class="content">タブ3コンテンツ</p> 15 </div> 16 </div>

javascript

1const tab_menu = document.querySelectorAll('.tab-menu'); 2 const contents = document.querySelectorAll('.content'); 3 4 for (let i = 0; i < tab_list.length; i++) { 5 tab_menu[i].addEventListener('click', tab_check()); 6 } 7 8 function tab_check(e) { 9 //カウンター変数を定義 10 let num; 11 12 //tab_menuのis_activeクラスを消去 13 if (!e.target.classList.contains('is-active')) { 14 for (let i = 0; i < tab_menu.length; i++) { 15 if (tab_menu[i].classList.contains('is-active')) { 16 tab_menu[i].classList.remove('is-active'); 17 } 18 } 19 } 20 21 //クリックイベントが発火後、tab_menuに対してis-activeクラスを付与 22 e.target.classList.add('is-active'); 23 24 //何番目にis-activeクラスが付いているのか特定 25 for (let i = 0; i < tab_menu.length; i++) { 26 if (tab_menu[i].classList.contains('is-active')) { 27 num = i; 28 } 29 } 30 content_check(num); 31 } 32 33 function content_check(num) { 34 //contentsからis-activeクラスを消去 35 for (let i = 0; i < contents.length; i++) { 36 if (contents[i].classList.contains('is-active')) { 37 contents[i].classList.remove('is-active'); 38 } 39 } 40 //tab_checkから引き継いだnum番目のcontentsに対してis-activeクラスを付与 41 contents[num].classList.add('is-active'); 42 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

関数に()をつけたらそこで実行してしまいます。

js

1// tab_menu[i].addEventListener('click', tab_check()); 2// ↓ 3 tab_menu[i].addEventListener('click', tab_check );

投稿2020/12/12 15:57

kei344

総合スコア69606

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問