JavaScript 標籤頁切換失敗排查：類型錯誤與邏輯重構

初學者編寫原生 JS 標籤頁切換，遇到「點擊無反應、報錯」問題。經排查發現三大硬傷：getElementsbyTagName 大小寫錯誤、循環閉包導致 i 洩漏、CSS 類名切換邏輯混亂。重構為簡潔的函數式寫法即可解決。

原代碼關鍵錯誤

// 1. 拼寫錯誤：b 小寫
var oDivs = oDDiv.getElementsbyTagName("div"); // 應為 getElementsByTagName

// 2. 循環中直接用 i，onclick 觸發時 i 已為末值
for (var i = 0; i < oLis.length; i++) {
    oLis[i].onclick = function() { oDivs[i].className = ""; } // i 永遠等於 length
}

// 3. 類名切換邏輯冗餘，易漏改

重構版（ES5 兼容）

window.onload = function() {
    var tabs = document.getElementById('tabs');
    var lis = tabs.querySelectorAll('ul > li');
    var panels = document.getElementById('DDiv').querySelectorAll('div');

    lis.forEach(function(li, idx) {
        li.onclick = function() {
            // 重置所有
            lis.forEach(function(l) { l.className = ''; });
            panels.forEach(function(p) { p.className = 'no'; });
            // 激活當前
            li.className = 'on';
            panels[idx].className = '';
        };
    });
};

進階：事件委託 + 數據屬性

<ul id="tab-list">
  <li data-index="0" class="on">Tab1</li>
  <li data-index="1">Tab2</li>
</ul>
<div id="panels">
  <div class="on">內容1</div>
  <div>內容2</div>
</div>

document.getElementById('tab-list').addEventListener('click', function(e) {
    var li = e.target.closest('li[data-index]');
    if (!li) return;
    var idx = +li.dataset.index;
    document.querySelectorAll('#tab-list li').forEach(function(l) { l.className = ''; });
    document.querySelectorAll('#panels > div').forEach(function(p) { p.className = ''; });
    li.className = 'on';
    document.querySelectorAll('#panels > div')[idx].className = 'on';
});

避坑清單

• 方法名大小寫：getElementsByTagName、querySelectorAll。
• 循環閉包：用 forEach、let (ES6) 或立即執行函數捕獲索引。
• 類名操作：用 classList.add/remove/toggle 替代 className 字符串拼接。

重構後代碼可讀性強、無閉包坑、易維護。