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 更改时自动更改。

您的循环正在从列表的元素中删除类“active”。一旦发生这种情况，每个元素都会逐个元素地从节点列表中消失，就好像它从未存在过一样。该列表因此缩短了一个元素。 .forEach() 循环通过遍历数字索引来完成它的工作，并且它总是递增。因此，您最终会跳过条目。

最好的方法是不断更改列表的 first 元素，直到列表为空:

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