页面加载时New York轮播未默认隐藏，请求技术协助

核心问题分析 #

New York轮播未按CSS默认隐藏、且跨页面显示，本质是JS初始化逻辑直接覆盖了CSS默认样式，同时标签页切换时未同步管控轮播元素的显示状态。

具体排查修复步骤 #

• 检查New York轮播的JS初始化逻辑：
  复制London的轮播代码后，若直接照搬了w3schools示例中“页面加载时主动设置第一张幻灯片为display:block”的逻辑，会直接覆盖.mySlides_ny {display:none}的CSS规则。需把轮播的初始化显示逻辑，绑定到New York标签的切换事件中，而非页面加载时全局执行。
• 补全标签页切换的状态同步：
  当前切换逻辑可能仅控制了页面容器的显隐，未同步处理轮播元素。比如切换到London页时，需把所有.mySlides_ny设为display:none；切换到New York页时，再将对应轮播的第一张设为display:block，同时启动轮播定时器（如果有）。
• 强化轮播元素的作用域隔离：
  确保New York的所有轮播元素都嵌套在它专属的页面容器（如<div id="newyork-page">）内。这样即便JS修改了子元素的display属性，只要父容器被设为display:none，子元素就不会在其他页面显示。
• 验证CSS优先级：
  用浏览器开发者工具查看.mySlides_ny元素的computed样式，确认display属性的最终来源。如果是Tailwind类或JS行内样式优先级更高，可调整CSS选择器的优先级（比如#newyork-page .mySlides_ny {display:none}），临时测试也可加!important（不推荐长期使用）。

快速修复代码示例 #

调整New York轮播的JS逻辑，绑定到标签切换事件：

// 封装New York轮播的初始化显示逻辑
function initNewYorkSlides() {
  const slides = document.getElementsByClassName("mySlides_ny");
  // 先隐藏所有轮播图
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  // 仅在当前标签激活时显示第一张
  slides[0].style.display = "block";
}

// 绑定New York标签点击事件
document.getElementById("ny-tab").addEventListener("click", function() {
  // 隐藏其他页面容器
  document.getElementById("london-page").style.display = "none";
  document.getElementById("shanghai-page").style.display = "none";
  // 显示当前页面容器
  document.getElementById("newyork-page").style.display = "block";
  // 初始化当前页面轮播
  initNewYorkSlides();
});

// 页面加载时强制隐藏New York轮播
window.onload = function() {
  const slides = document.getElementsByClassName("mySlides_ny");
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
}

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