垂直标签页默认关闭及hover触发内容显示需求求助

我来帮你搞定这两个需求！咱们一步步调整代码来实现：

1. 解决默认不打开任何标签的问题 #

原来的示例会默认给第一个标签按钮加active类，且让对应内容块显示，咱们需要：

• 移除HTML中所有标签按钮的active类（包括原示例里的"OpenBydefault"相关设置）
• 确保所有标签内容块默认处于隐藏状态，在CSS里明确设置.tabcontent { display: none; }，去掉任何让第一个内容块默认显示的样式

2. 实现仅hover显示、点击不保留内容的效果 #

原来的逻辑是点击触发显示，咱们要改成hover触发，同时点击时不保留显示状态：

• 把JavaScript里的点击事件监听换成mouseover事件，鼠标悬停时显示对应内容
• 添加mouseout事件监听，鼠标离开标签按钮时隐藏对应内容
• 移除点击事件的处理逻辑，或者直接阻止点击事件的默认行为（避免误触发）

修改后的完整代码 #

HTML部分

<div class="tab">
  <button class="tablinks" data-city="London">London</button>
  <button class="tablinks" data-city="Paris">Paris</button>
  <button class="tablinks" data-city="Tokyo">Tokyo</button>
</div>

<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 {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}

/* 标签按钮样式 */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

/* 鼠标悬停按钮样式 */
.tab button:hover {
  background-color: #ddd;
}

/* 标签内容样式 */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
  display: none; /* 关键：默认隐藏所有内容 */
}

JavaScript部分

// 获取所有标签按钮和内容块
const tabButtons = document.getElementsByClassName("tablinks");
const tabContents = document.getElementsByClassName("tabcontent");

// 给每个按钮添加hover相关事件
for (let i = 0; i < tabButtons.length; i++) {
  // 鼠标悬停时显示对应内容
  tabButtons[i].addEventListener("mouseover", function() {
    // 先隐藏所有内容
    for (let j = 0; j < tabContents.length; j++) {
      tabContents[j].style.display = "none";
    }
    // 显示当前按钮对应的内容
    const cityName = this.getAttribute("data-city");
    document.getElementById(cityName).style.display = "block";
  });

  // 鼠标离开时隐藏内容
  tabButtons[i].addEventListener("mouseout", function() {
    const cityName = this.getAttribute("data-city");
    document.getElementById(cityName).style.display = "none";
  });

  // 阻止点击事件的默认行为，避免点击后内容停留
  tabButtons[i].addEventListener("click", function(e) {
    e.preventDefault();
  });
}

关键修改说明 #

• 移除了所有默认的active类，确保页面加载时没有任何标签内容显示
• CSS里强制所有.tabcontent默认display: none
• 用mouseover和mouseout事件替代原来的点击事件，实现悬停显示、离开隐藏的效果
• 添加点击事件阻止默认行为，确保点击标签后内容不会停留显示

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