JS页面加载时调用showTab函数失效问题求助

看起来你碰到了一个很常见的DOM加载时机问题！让我帮你拆解一下原因和解决办法：

问题根源 #

你的var tabButtons = document.querySelectorAll('.tabContainer .buttonContainer button')这行代码，如果是在DOM还没完全加载完成的时候执行（比如把JS代码放在<head>标签里），浏览器还没渲染出那些按钮元素，所以tabButtons会是一个空的NodeList。这时候调用showTab(0)，函数里尝试访问tabButtons[panelIndex]自然找不到对应的元素，样式设置也就没效果。

而当你点击任意按钮后，DOM已经完全加载完成，相关元素能被正确识别，所以showTab()函数就能正常工作了。

解决方案 #

方案1：将元素获取与初始化调用放入DOM就绪回调 #

把获取按钮元素和初始化调用的逻辑都放到DOMContentLoaded事件回调里，确保只有DOM完全加载后才执行这些代码：

function showTab(panelIndex) { 
  tabButtons.forEach(function(node) { 
    node.style.backgroundColor = '' 
    node.style.color = '' 
  }) 
  tabButtons[panelIndex].style.backgroundColor = 'rgb(66, 66, 66)' 
  tabButtons[panelIndex].style.color = '#ffffff' 
}

document.addEventListener('DOMContentLoaded', function() {
  // 此时DOM已完全加载，能正确获取按钮元素
  var tabButtons = document.querySelectorAll('.tabContainer .buttonContainer button')
  // 初始化激活第一个标签
  showTab(0)

  // 顺便给按钮绑定点击事件，实现点击切换
  tabButtons.forEach(function(button, index) {
    button.addEventListener('click', function() {
      showTab(index)
    })
  })
}, false);

方案2：将JS代码放到HTML标签末尾 #

浏览器是从上到下解析HTML的，把JS代码放在</body>标签前，前面的DOM元素已经被渲染完成，这时候获取按钮元素就能得到正确的集合：

<body>
  <!-- 你的HTML结构 -->
  <div class="tabContainer">
    <div class="buttonContainer">
      <button>Home</button>
      <button>Projects</button>
      <button>Contact</button>
      <button>Bio</button>
    </div>
  </div>

  <!-- 把JS代码放在body末尾 -->
  <script>
    function showTab(panelIndex) { 
      tabButtons.forEach(function(node) { 
        node.style.backgroundColor = '' 
        node.style.color = '' 
      }) 
      tabButtons[panelIndex].style.backgroundColor = 'rgb(66, 66, 66)' 
      tabButtons[panelIndex].style.color = '#ffffff' 
    }

    var tabButtons = document.querySelectorAll('.tabContainer .buttonContainer button')
    showTab(0)

    // 绑定点击切换事件
    tabButtons.forEach(function(button, index) {
      button.addEventListener('click', function() {
        showTab(index)
      })
    })
  </script>
</body>

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