IE浏览器中forEach方法无法正常运行的前端问题求助

你的问题出在两个核心点上：IE不支持NodeList的原生forEach方法，以及IE不识别<a>标签的disabled属性，这两个问题共同导致功能在IE里完全罢工。下面一步步给你解决：

1. 修复forEach方法的兼容性问题 #

document.querySelectorAll()返回的是NodeList对象，Chrome和Firefox已经给NodeList实现了forEach方法，但IE完全不支持这个特性，所以代码执行到tabButtons.forEach()时会直接抛出错误，整个enableTabButton函数直接停摆。

你有两种方案可以解决这个问题：

方案A：添加NodeList.forEach的Polyfill #

在你的代码最顶部插入这段兼容代码，让IE也能识别NodeList的forEach：

"use strict";
// 先添加兼容补丁，再写业务代码
if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = function(callback, thisArg) {
        thisArg = thisArg || window;
        for (var i = 0; i < this.length; i++) {
            callback.call(thisArg, this[i], i, this);
        }
    };
}

// 后面是你的原有代码
var tabButtons = document.querySelectorAll('.navlinksGP > a');
function enableTabButton(buttonId) {
    // ... 你的原有逻辑
}

方案B：把NodeList转换成数组 #

将querySelectorAll返回的结果转换成数组，数组的forEach是IE9及以上版本支持的：

"use strict";
// 转换方式1：IE12+支持的写法
var tabButtons = Array.from(document.querySelectorAll('.navlinksGP > a'));

// 或者转换方式2：兼容IE9+的写法
var tabButtons = Array.prototype.slice.call(document.querySelectorAll('.navlinksGP > a'));

// 后面的forEach逻辑保持不变
function enableTabButton(buttonId) {
    tabButtons.forEach(function(btn) {
        // ... 你的原有逻辑
    });
}

2. 修复<a>标签禁用的兼容性问题 #

HTML规范里<a>标签本身没有disabled属性，Chrome和Firefox是做了额外兼容才让btn.disabled = true生效，但IE完全不识别这个设置。要实现禁用点击的效果，需要用CSS的pointer-events: none来替代：

修改你的enableTabButton函数：

function enableTabButton(buttonId) {
    tabButtons.forEach(function(btn) {
        if (btn.id === buttonId) {
            // 用pointer-events禁用点击，替代无效的disabled属性
            btn.style.pointerEvents = 'none';
            btn.style.background = '#eeaf00';
            btn.style.color = '#ffffff';
        } else {
            btn.style.pointerEvents = 'auto';
            btn.style.background = '#ffffff';
            btn.style.color = '#eeaf00';
        }
    });
}

这样修改后，你的按钮激活/禁用功能就能在Chrome、Firefox和IE里正常工作了，选中的按钮会高亮且无法点击，下方内容的切换也能正常触发。

内容的提问来源于stack exchange，提问作者user9727963