Javascript 循环代码 getElementByID

Question

我不明白为什么下面的 for 循环不起作用。

我创建了一个可以正常工作的函数，因此 HTML 不是问题。这是有效的函数：

function deactivateAllTabs() {
    document.getElementById('tab-header-1').className = 'tab-header';
    document.getElementById('tab-header-2').className = 'tab-header';
    document.getElementById('tab-header-3').className = 'tab-header';
    document.getElementById('tab-content-1').className = 'tab-content';
    document.getElementById('tab-content-2').className = 'tab-content';
    document.getElementById('tab-content-3').className = 'tab-content'; 
}

而不是 hard-coding tab-headers 和 tab-contents id，我想我会创建一个 for 循环来自动处理未来的附加选项卡。

如果我分别再添加一组：

document.getElementById('tab-header-4').className = 'tab-header';
document.getElementById('tab-content-4').className = 'tab-content';

以上一切正常。当我尝试下面的 for 循环时它失败了。知道我哪里出错了吗？

单击标签页时出现的错误是：

Uncaught TypeError: Cannot set property 'className' of null

function deactivateAllTabs() {
    for (var i = 0; i < tabHeaders.length; i++) {
        document.getElementById('tab-header-'+i).className = 'tab-header';
        document.getElementById('tab-content-'+i).className = 'tab-content';
    }
}

Answer 1

您的循环从 0 开始，但您的选项卡 headers 从 1 开始。

function deactivateAllTabs() {
    for (var i = 1; i <= tabHeaders.length; i++) {
        document.getElementById('tab-header-'+i).className = 'tab-header';
        document.getElementById('tab-content-'+i).className = 'tab-content';
    }
}

Answer 2

您的 for 循环是零索引的，但选项卡是一索引的。这应该从 1 而不是 0 开始工作。对吧？

function deactivateAllTabs() {
    for (var i = 1; i < tabHeaders.length; i++) {
        document.getElementById('tab-header-'+i).className = 'tab-header';
        document.getElementById('tab-content-'+i).className = 'tab-content';
    }
}

Answer 3

我想你可以使用 .

function deactivateAllTabs() { 
    for (var i = 0; i < tabHeaders.length; i++) {
        document.getElementById('tab-header-'+i).setAttr(className, 'tab-header'); 
        document.getElementById('tab-content-'+i).setAttr(className,'tab-content'); 
    } 
}

Answer 4

请参阅 Neil 的回答来解决您的问题

这是使用 jquery

的备选答案

您可以 select 所有以相同名称开头的选项卡并更改其 class 而无需循环。

$('div[id^="tab-header-"]').attr('class', 'tab-header');
$('div[id^="tab-content-"]').attr('class', 'tab-content');

Javascript 循环代码 getElementByID

Javascript code getElementByID for loop

html

javascript

loops

for-loop

getelementbyid