タブ実装時についての質問

Question

タブ実装について質問です。
https://blog-and-destroy.com/24218#chapter-3を参考にタブを実装したのですが、気になる点があります。
以下の箇所なのですが、タブを切り替えたときに残りのactiveが残らないように0～3のactiveクラスを削除しています。
tabMenu[0].classList.remove("active");
tabMenu[1].classList.remove("active");
tabMenu[2].classList.remove("active");

ですが、https://blog-and-destroy.com/24218#chapter-3をみると、0のみしか削除しておらず、
このままでは、複数のタブを切り替えた際に、「is-active」classが削除されないような気がするんですが、
実装してみると1~2の「is-active」classがきちんと消えています。

document.getElementsByClassName('is-active')[0].classList.remove('is-active');

なぜ、あらかじめ、0～3のclassを削除していなくても、タブを切り替えた際に、0～3のclassがきちんと
削除されるのでしょうか？

    <ul id="tab">
        <li class="tab-menu active">タブ</li>
        <li class="tab-menu">タブ2</li>
        <li class="tab-menu">タブ3</li>
    </ul>
    <div id="tab-content">
        <div class="content active">タブコンテンツ</div>
        <div class="content">タブコンテンツ2</div>
        <div class="content">タブコンテンツ3</div>
    </div>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

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

        ul li {
            width: 33.3%;
            text-align: center;
            padding-top: 10px;
            padding-bottom: 10px;
            background: #000;
            color: #ffffff;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        ul li.active {
            background: red;
            transition: all 0.3s ease;

        }

        .content.active {
            display: block;
            transition: all 0.3s ease;
        }

        .content {
            display: none;
            transition: all 0.3s ease;

        }
    </style>
    <script>

        var tabMenu = document.getElementsByClassName("tab-menu");
        var contents = document.getElementsByClassName("content");

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

                contents[0].classList.remove("active");
                contents[1].classList.remove("active");
                contents[2].classList.remove("active");
                let arrayTab = Array.prototype.slice.call(contents);
                let index = arrayTab.indexOf(contents[i]);
                contents[index].classList.add("active");
            });
        }

    </script>

Answer 1

参考サイトのコードの

document.getElementsByClassName('is-active')[0].classList.remove('is-active');

は、

1. is-activeというクラスのついた最初の要素を探し出して、

document.getElementsByClassName('is-active')[0]
2. そこからis-activeというクラスを消しています。
classList.remove('is-active')

is-activeというクラスはこの文書の中で一つのタブにしかついていないはずですから、3回クラスを消す必要がないのです。

質問者の書いたコードの

tabMenu[0].classList.remove("active");

は、tabMenuがactiveなのかどうなのかを判定せずにactiveというクラスを消しているので、とにかく3回消さないといけなくなっています。

Comments

[MTON]

返信が遅くなり申し訳ありません。
ありがとうございます!
理解できました!!