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

現在、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    }

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

回答1件

ベストアンサー

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

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