Javascript classList 未按预期工作

Question

我正在尝试使用 js 和 css 创建一个简单的选项卡式功能。单击选项卡按钮时，它应该active从控件中删除所有类，然后active仅将类添加到选定的元素。

但是，当我尝试删除active该类时，它无法按预期工作。

在选项卡之间切换应该只允许一个按钮和一个内容随时处于活动状态。

看到这个jsFiddle

var tabs = document.getElementsByClassName('tabs');

Array.prototype.forEach.call(tabs, function(tab) {

    var btns = tab.getElementsByClassName('tabs-button');
    Array.prototype.forEach.call(btns, function(btn) {

        btn.addEventListener('click', function(e){

            e.preventDefault();
            var href = this.getAttribute('href').replace('#','');
            var target = document.getElementById(href);
            var allActive = tab.getElementsByClassName('active');
            Array.prototype.forEach.call(allActive, function(active) {
                active.classList.remove('active');
            });
            this.classList.add('active');
            target.classList.add('active');

        });

    });

});

谁能看到我哪里出错了？

Answer 1

来自的返回值getElementsByClassName()是一个活动节点列表。它是“实时的”意味着它会在 DOM 更改时自动更改。

您的循环正在从列表元素中删除“活动”类。一旦发生这种情况，一个元素一个元素，每个元素从节点列表中消失，就好像它从未存在过一样。该列表因此缩短了一个元素。该.forEach()循环就其工作通过循环数字指标，它永远增量。因此，您最终会跳过条目。

最好的方法是不断更改列表的第一个元素，直到列表为空：

        var allActive = tab.getElementsByClassName('active');
        while (allActive.length) {
          allActive[0].classList.remove("active");
        }