javascriptでタブを実装したい

Question

タブの実装を行っているのですが、インデックス番号がうまく取れません。
console.log(index)を見ると、0、1、2と３つ取れてしまいます。for文の中にfor文を書いているからだと思うのですが、
このように、for文の中にfor文を書く場合、2回目のfor文（for (let t = 0; t < tabContents.length; t++)）には、
最初のループの影響を与えないようにする方法とかってあるのでしょうか？

    <ul>
        <li class="tab active">タブリスト</li>
        <li class="tab">タブリスト2</li>
        <li class="tab">タブリスト3</li>
    </ul>
    <div>
        <div class="tab-content active">コンテンツ1</div>
        <div class="tab-content">コンテンツ2</div>
        <div class="tab-content">コンテンツ3</div>
    </div>

        body {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
            padding: 0;
            display: flex;
            margin: 0;
            width: 100%;
            background: red;
        }

        ul li {
            background: black;
            width: 33.3%;
            text-align: center;
            color: #ffffff;
            padding-top: 15px;
            padding-bottom: 15px;
            cursor: pointer;
        }

        ul li.active {
            background: red;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        var tab = document.getElementsByClassName("tab");
        var tabContents = document.getElementsByClassName("tab-content");

        function tabMenu() {
            for (i = 0; i < tab.length; i++) {
                tab[i].addEventListener("click", function () {
                    tab[0].classList.remove("active");
                    tab[1].classList.remove("active");
                    tab[2].classList.remove("active");
                    this.classList.add("active");
                    for (let t = 0; t < tabContents.length; t++) {
                        tabContents[0].classList.remove("active");
                        let tabArray = Array.prototype.slice.call(tabContents);
                        let index = tabArray.indexOf(tabArray[t]);
                        console.log(index)
                        tabContents[0].classList.remove("active");
                        tabContents[1].classList.remove("active");
                        tabContents[2].classList.remove("active");
                        tabContents[index].classList.add("active");
                    }
                });
            };
        };
        tabMenu();

Answer 1

console.log(index)を見ると、0、1、2と３つ取れてしまいます。

外側のforがなくてもその挙動になります。

        tabMenu();
// ここに追加してみたら多分「0、1、2」とでると思いますよ
                    for (let t = 0; t < tabContents.length; t++) {
                        tabContents[0].classList.remove("active");
                        let tabArray = Array.prototype.slice.call(tabContents);
                        let index = tabArray.indexOf(tabArray[t]);
                        console.log(index)
                        tabContents[0].classList.remove("active");
                        tabContents[1].classList.remove("active");
                        tabContents[2].classList.remove("active");
                        tabContents[index].classList.add("active");
                    }
```**動くサンプル：**[https://jsfiddle.net/2sp3jxbf/](https://jsfiddle.net/2sp3jxbf/)

Comments

[MTON]

イメージ的には以下のようなコードで実装したいのですが、
この場合、tabInner()のtab[i]は継承されないため、エラーになりますよね？
tab[i]を tabInner()内で使えるようにするにはどうすればよいのでしょうか？

var tab = document.getElementsByClassName("tab");
var tabContents = document.getElementsByClassName("tab-content");

function tabMenu() {
for (i = 0; i < tab.length; i++) {
tab[i].addEventListener("click", function () {
tab[0].classList.remove("active");
tab[1].classList.remove("active");
tab[2].classList.remove("active");
this.classList.add("active");

});
};
};
tabMenu();

function tabInner() {
for (let t = 0; t < tabContents.length; t++) {
tab[i].addEventListener("click", function () {
tabContents[0].classList.remove("active");
let tabArray = Array.prototype.slice.call(tabContents);
let index = tabArray.indexOf(tabArray[t]);
console.log(index)
tabContents[0].classList.remove("active");
tabContents[1].classList.remove("active");
tabContents[2].classList.remove("active");
tabContents[index].classList.add("active");
});
};
};
tabInner();

[kei344]

継承とは？
質問文に提示のコードは、「for (i = 0; i < tab.length; i++)」の i をlet i にして中の「for (let t = 0; t < tabContents.length; t++)」を使わない書き方にすればよいです。（そこのコードがおかしなことになっています）

[MTON]

ご返信ありがとうございます。
for (let t = 0; t < tabContents.length; t++)になおしました。
このままだとコンテンツの内容は切り換えることはできないかと思いますが、
function tabMenu()を実行した際に、
for (let t = 0; t < tabContents.length; t++)コード類を実行するようにしたいのですが、
こちらはどうすればよいのでしょうか？

[kei344]

＞ for (let t = 0; t < tabContents.length; t++)になおしました。
特にそうコメントしたつもりは無いのですが。

[MTON]

>「for (let t = 0; t < tabContents.length; t++)」を使わない書き方にすればよいです
すみません、こちらがよくわかりません。

for文以外に各tabContentsを方法があるのでしょうか？
当方javascript初心者です。

[kei344]

> for文以外に各tabContentsを方法があるのでしょうか？
書かれているコードの「tab」の場合はforを使わずactiveクラスを外していますよ。

[MTON]

activeは外せますが、for文をつかって、各tabContentsを取得しないと、これでは、タブを切り替えたときに、そのタブのコンテンツに移動しないはずです。

作成して頂いた以下のサンプルもコンテンツ内は切り換えれていない状態となっています。
https://jsfiddle.net/2sp3jxbf/

[kei344]

> for文をつかって、各tabContentsを取得しないと、これでは、タブを切り替えたときに、そのタブのコンテンツに移動しないはずです。
そう書く方法もありますが、それが不要な書き方もあるからそうコメントしたのですが。
https://jsfiddle.net/zd8ycv1e/

> 作成して頂いた以下のサンプルもコンテンツ内は切り換えれていない状態となっています。
「外側のforがなくてもその挙動になります。 」の例なので元コードは変更していません。

[MTON]

tabContentsはfor文で回さなくても[i]で取得可能なのですね。
初めて知りました。
ありがとうございました。

[kei344]

多分大きく勘違いしています。forの中に書かれたコードは let i のスコープ内なので参照できるだけです。

[MTON]

varではなくて、letではないと、参照できないということですね。
ありがとうございます。