JavaScript标签切换组件问题：点击标签时隐藏其他内容

你的代码目前只实现了显示点击标签对应的内容，但没隐藏其他标签的内容。只需要在显示目标内容前，先把所有内容都隐藏，就能解决问题。另外还要加个判断，防止点击到标签容器空白处时出错。

修改后的核心逻辑：

• 点击标签时，先遍历所有内容元素，给它们添加hidden类实现全局隐藏
• 再移除当前点击标签对应内容的hidden类，显示目标内容
• 增加边界判断，避免点击非标签区域时触发错误

完整可运行代码 #

HTML

<div class="container">
  <div class="upContainer">
    <div class="tab1 tab">tab1</div>
    <div class="tab2 tab">tab2</div>
    <div class="tab3 tab">tab3</div>
  </div>
  <div class="downContainer">
    <div class="content__tab1 content">content1</div>
    <div class="content__tab2 content hidden">content2</div>
    <div class="content__tab3 content hidden">content3</div>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.upContainer {
  display: flex;
}

.tab {
  width: 100px;
  height: 70px;
  background-color: aqua;
  cursor: pointer;
  text-align: center;
  margin: 0px 10px;
}

.content {
  width: 300px;
  height: 100px;
  margin-top: 10px;
  text-align: center;
  background-color: black;
  color: aliceblue;
}

.hidden {
  display: none;
}

JavaScript

const tabContainer = document.querySelector(".upContainer");
const allContents = document.querySelectorAll(".content");

tabContainer.addEventListener("click", function(e) {
  // 定位点击的标签元素，未点击到标签则直接终止
  const clickedTab = e.target.closest(".tab");
  if (!clickedTab) return;

  const tabText = clickedTab.textContent;
  
  // 隐藏所有内容
  allContents.forEach(content => content.classList.add("hidden"));
  // 显示当前标签对应的内容
  document.querySelector(`.content__${tabText}`).classList.remove("hidden");
});

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