如何实现窗口resize至450px以上时，Tabs自动恢复默认选中状态？

需求：现有Tabs切换功能，当窗口宽度调整至大于450px时，自动恢复默认状态——切换回第一个tab（tab1），并显示对应内容。

修改后的完整代码 #

HTML（无需修改）

<ul class="tabs">
  <li class="active" data-content=".one">One</li>
  <li data-content=".two">Two</li>
  <li data-content=".three">Three</li>
</ul>
<div class="content">
  <div class="one">cont one</div>
  <div class="two">2</div>
  <div class="three">cont three</div>
</div>

CSS（无需修改）

.tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0
}

.tabs li {
  padding: 10px 30px;
  background: white;
  border-right: 1px solid red;
  cursor: pointer;
  transition: 0.5s
}

.tabs li.active,
.tabs li:hover {
  background: pink;
}

.content {
  background: pink;
}

.content>div {
  padding: 30px
}

.content div:not(:first-child) {
  display: none
}

JavaScript（核心修改）

let tabs      = document.querySelectorAll(".tabs li");
let tabsArray = Array.from(tabs);
let divs      = document.querySelectorAll(".two, .one, .three");
let divsArray = Array.from(divs);

// 封装重置到默认tab的逻辑，方便复用
function resetToDefaultTab() {
  // 移除所有tab的active状态
  tabsArray.forEach(ele => ele.classList.remove("active"));
  // 给第一个tab添加active状态
  tabsArray[0].classList.add("active");
  // 隐藏所有内容块
  divsArray.forEach(div => div.style.display = "none");
  // 显示第一个内容块
  document.querySelector(tabsArray[0].dataset.content).style.display = "block";
}

// 绑定tab点击事件逻辑
tabsArray.forEach((ele) => {
  ele.addEventListener("click", function(e) {
    tabsArray.forEach((ele) => {
      ele.classList.remove("active");
    });
    e.currentTarget.classList.add("active");
    divsArray.forEach((div) => {
      div.style.display = "none"
    });
    document.querySelector(e.currentTarget.dataset.content).style.display = "block"
  });
});

// 监听窗口大小变化，加入防抖优化性能
let resizeTimer;
window.addEventListener('resize', function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    // 判断窗口宽度是否超过450px
    if (window.innerWidth > 450) {
      resetToDefaultTab();
    }
  }, 200);
});

修改说明 #

1. 提取重置函数：把恢复默认tab的逻辑单独封装，避免重复代码，同时让resize事件的处理更清晰。
2. 添加Resize监听：通过window.resize事件捕捉窗口尺寸变化，判断宽度条件满足时执行重置操作。
3. 防抖处理：加入200ms延迟执行的定时器，避免窗口调整过程中频繁触发重置逻辑，减少不必要的DOM操作。

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