Question

我有这个脚本：

(function Activetab () {
    var tabs = document.getElementsByClassName('tab');

    for (i = 0; i < tabs.length; i++) {
        tabs[i].addEventListener('click', function (e) {
            removeActive();
            e.target.classList.add('active');
         })
    }
})();

function removeActive() {
    var tabs = document.getElementsByClassName('tab');
    for (i = 0; i < tabs.length; i++) {
        tabs[i].classList.remove('active')
    }
}
window.onload = Activetab();
window.onload = removeActive();

出于某种原因，当我尝试使用window.onload = Activetab();时返回

未捕获的ReferenceError：未定义Activetab

有什么问题？为什么window.onload funcion无法监听Activetab函数

Answer 1

您需要立即调用函数Activetab，您需要详细了解 IIFE（立即调用函数表达式）。

我不知道您为什么要立即执行该功能，但这可能是您正在寻找的方法：

function Activetab () {
    var tabs = document.getElementsByClassName('tab');

    for (i = 0; i < tabs.length; i++) {
        tabs[i].addEventListener('click', function (e) {
            removeActive();
            e.target.classList.add('active');
         })
    }
};

function removeActive() {
    var tabs = document.getElementsByClassName('tab');
    for (i = 0; i < tabs.length; i++) {
        tabs[i].classList.remove('active')
    }
}
window.onload = Activetab; // Just assign the function
window.onload = removeActive; // Just assign the function

Answer 2

你有两个选择，不要把它变成IIFE

function Activetab () {
        var tabs = document.getElementsByClassName('tab');
        for (i = 0; i < tabs.length; i++) {
            tabs[i].addEventListener('click', function (e) {
                removeActive();
                e.target.classList.add('active');
            })
        }
    }

或将其保留为IIFE并删除window.onload = Activetab(); IIFE立即被调用，所以不需要调用它

IIFE也可以是匿名的。

未捕获的ReferenceError：未定义Activetab

2 个答案: