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()循环通过遍历数字索引来完成其工作，并且它将始终递增。因此，您最终会跳过条目。

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

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

Answer 2

我发现并且最有效的最简单方法是使用： -someElementToRemoveClassName-.classList.value =“”

它将清除整个ClassName列表，并将其返回到原始状态，让你们再次重新添加过渡类，并使过渡像往常一样再次出现。

Javascript classList未按预期工作

2 个答案: