页面加载时首个Tab无法自动打开问题求助

嘿，我完全懂你遇到的麻烦——脚本放在<head>里的话，浏览器会先执行这段JS，但此时页面里的Tab按钮和内容还没被渲染出来呢！代码找不到第一个Tab元素，自然没法触发默认打开的操作啦。下面给你几个简单靠谱的解决办法：

方法1：把脚本移到页面末尾 #

这是最省心的方案，把外部脚本的引用标签挪到</body>标签的前面。这样等所有DOM元素都加载完成后，JS才会执行，就能准确找到第一个Tab按钮了。

原来的写法：

<head>
  <script src="你的Tab脚本文件.js"></script>
</head>

改成这样：

<body>
  <!-- 你的所有页面内容都在这里 -->
  <script src="你的Tab脚本文件.js"></script>
</body>

方法2：用DOM加载事件包裹代码 #

如果不想移动脚本位置，那就把Tab的初始化代码放进DOMContentLoaded事件里，确保只有当整个DOM结构都就绪后，才执行Tab的逻辑。

打开你的外部JS文件，把代码改成这个样子：

document.addEventListener('DOMContentLoaded', function() {
  // 把原来w3school的Tab切换函数放这里
  function openCity(evt, cityName) {
    // 隐藏所有Tab内容
    let i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    // 移除所有按钮的active类
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    // 显示当前Tab内容，给对应按钮加active类
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
  }

  // 触发第一个Tab的点击事件，默认展开
  document.getElementsByClassName("tablinks")[0].click();
});

这样不管脚本放在哪里，都会等DOM加载完再执行初始化，第一个Tab就能自动展开了。

额外的降级小技巧 #

你还可以给第一个Tab按钮和对应的内容手动加样式，就算JS出点小问题，页面加载时也能默认显示第一个Tab：

<div class="tab">
  <button class="tablinks active" onclick="openCity(event, 'London')">London</button>
  <!-- 其他Tab按钮 -->
</div>

<div id="London" class="tabcontent" style="display:block">
  <!-- London的Tab内容 -->
</div>

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