Javascript code getElementByID for loop

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'; 
} 

Вместо жесткое кодирование закладок заголовков и вкладка-содержимое идентификаторов, я думал, что создать цикл автоматически заботиться о будущих дополнительных вкладках.

Если я соответственно добавить еще один набор:

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, но ваши вкладки заголовки начинаются с 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

Ваш для петли нулевые индексы, но вкладки индексируются. Это должно работать, начиная с 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

знакомство Нейл для решения вашей проблемы

Это альтернативный ответ, используя JQuery

Вы можете выбрать все вкладки, которые начинаются с тем же именем и изменить свой класс без зацикливания.

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