页面加载时默认激活首个Tab的实现问题及代码咨询

嘿，刚好能帮你搞定这个Tab的需求！你要的是首次打开页面自动激活第一个Tab，之后用户再访问（包括刷新）所有Tab默认关闭，得点击才显示内容对吧？结合你给出的openCity函数片段，咱们可以用localStorage来区分首次和后续访问，完整实现逻辑如下：

第一步：准备基础的Tab HTML结构 #

先搭好Tab按钮和对应内容的DOM结构：

<!-- Tab 切换按钮容器 -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<!-- Tab 内容区域 -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

第二步：添加基础CSS样式 #

让Tab看起来更直观，区分激活和未激活状态：

/* Tab按钮容器样式 */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Tab按钮基础样式 */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: background-color 0.3s;
}

/* Tab按钮激活状态样式 */
.tab button.active {
  background-color: #ccc;
}

/* Tab内容默认隐藏 */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

第三步：完善JavaScript核心逻辑 #

补全你给出的openCity函数，再加上初始化逻辑，实现需求：

// Tab切换核心函数
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  
  // 隐藏所有Tab内容
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  
  // 移除所有Tab按钮的激活状态
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  
  // 显示当前选中的Tab内容，给对应按钮添加激活状态
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// 页面加载完成后执行初始化逻辑
window.onload = function() {
  // 从localStorage获取是否已访问过的标记
  const hasVisited = localStorage.getItem('hasVisited');
  const tablinks = document.getElementsByClassName('tablinks');
  const tabcontent = document.getElementsByClassName('tabcontent');

  if (!hasVisited) {
    // 首次访问：自动激活第一个Tab
    openCity({ currentTarget: tablinks[0] }, tablinks[0].getAttribute('onclick').match(/'([^']+)'/)[1]);
    // 标记为已访问，持久化到浏览器
    localStorage.setItem('hasVisited', 'true');
  } else {
    // 后续访问：隐藏所有Tab内容，移除所有按钮的激活状态
    for (let i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = 'none';
    }
    for (let i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(' active', '');
    }
  }
};

逻辑说明 #

• 首次访问判断：用localStorage存储一个hasVisited标记，首次加载时这个标记不存在，所以自动激活第一个Tab，然后把标记存到浏览器里。
• 后续访问处理：如果检测到hasVisited标记存在，就手动隐藏所有Tab内容，移除按钮的激活状态，让所有Tab处于关闭状态，必须点击才会显示对应内容。
• 重置测试：如果想测试首次访问的效果，打开浏览器控制台输入localStorage.removeItem('hasVisited')，刷新页面即可回到首次加载状态。

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