JavaScript可展开标签页默认状态控制问题求助

问题根源 #

原代码的判断逻辑是全局检测是否存在带firsttabopen类的容器，导致只要有一个容器带该类，所有容器的首个标签都会被打开；同时原本的判断逻辑错误，始终执行打开操作。正确的做法是针对每个容器单独判断，每个容器的状态只由自身的类决定。

修正后的代码实现 #

// 遍历每个标签页容器，单独处理每个实例
document.querySelectorAll('.tabsleft-container').forEach(container => {
  const tabs = container.querySelectorAll('.tabsleft-tab');
  const contents = container.querySelectorAll('.tabsleft-content');
  const images = container.querySelectorAll('.tabsleft-image');

  // 初始化状态：检查当前容器是否有firsttabopen类
  if (container.classList.contains('firsttabopen')) {
    // 打开当前容器的第一个标签
    tabs[0].classList.add('active');
    contents[0].classList.add('active');
    images[0].classList.add('active');
  } else {
    // 所有标签默认关闭
    tabs.forEach(tab => tab.classList.remove('active'));
    contents.forEach(content => content.classList.remove('active'));
    images.forEach(img => img.classList.remove('active'));
  }

  // 绑定标签点击事件，仅处理当前容器内的元素
  tabs.forEach((tab, index) => {
    tab.addEventListener('click', () => {
      // 收起当前容器内所有标签、内容和图片
      tabs.forEach(t => t.classList.remove('active'));
      contents.forEach(c => c.classList.remove('active'));
      images.forEach(i => i.classList.remove('active'));
      // 展开当前点击的标签对应内容和图片
      tab.classList.add('active');
      contents[index].classList.add('active');
      images[index].classList.add('active');
    });
  });
});

关键修改点 #

• 遍历每个容器：用document.querySelectorAll('.tabsleft-container').forEach单独处理每个实例，确保每个容器的状态独立。
• 容器级别的类判断：针对当前遍历的container检查firsttabopen类，而不是全局判断。
• 事件绑定隔离：点击事件仅操作当前容器内的标签、内容和图片，不会影响其他容器的元素。

这样修改后，每个标签页容器的默认状态完全由自身是否携带firsttabopen类决定，多个容器之间的状态互不干扰，同时解决了原本始终打开首个标签的问题。

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