如何移除导航标签的active类？Instagram布局开发问题求助

我正在开发类似Instagram的页面布局，尝试多种方法移除导航标签点击后的active类，但均未成功。以下是修复后的完整代码及说明：

修复后的HTML代码 #

<div class="menu">
  <p data-target="#initial" class="active">Initial</p>
  <p data-target="#product">Product</p>
  <p data-target="#contact">Contact</p>
</div>
<div class="content">
  <div data-content id="initial" class="active">
    <div class="cards">
      <div class="card">
        abc
      </div>
      <div class="card">
        abc
      </div>
      <div class="card">
        abc
      </div>
    </div>
  </div>
  <div data-content id="product">
    <div class="cards">
      <div class="card">
        lmn
      </div>
      <div class="card">
        lmn
      </div>
      <div class="card">
        lmn
      </div>
    </div>
  </div>
  <div data-content id="contact">
    <div class="cards">
      <div class="card">
        xyz
      </div>
      <div class="card">
        xyz
      </div>
      <div class="card">
        xyz
      </div>
    </div>
  </div>
</div>

修复后的CSS代码 #

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: Sans-serif;
}
body{
  padding: 5%;
}
.menu{
  display:flex;
}
.menu p{
  margin-right: 2rem;
  cursor: pointer;
}
.content{
  margin-top:2rem;
}
[data-content]{
  display:none;
}
.active[data-content]{
  display:block;
}
.menu .active{
  text-transform:uppercase;
  color:#FFF;
  background: #000;
  padding:  5px 10px;
  margin-top: -5px;
  border-radius: 50px;
}
.menu p{
  text-transform:uppercase;
}
.cards{
  display:flex;
  flex:1;
  flex-basis: 33.33%;
  max-width: 33.33%;
  min-width: 33.33%;
  height: 100%;
  position: relative;
}
.card{
  border: 1px solid #ccc;
  background: #fff;
}

修复后的JavaScript代码 #

const targets = document.querySelectorAll('[data-target]');
const content = document.querySelectorAll('[data-content]');

targets.forEach(target => {
  target.addEventListener('click',()=>{
    // 移除所有导航标签的active类
    targets.forEach(t => t.classList.remove('active'));
    // 移除所有内容区块的active类
    content.forEach(c => c.classList.remove('active'));
    
    // 给当前点击的标签和对应内容添加active类
    const t = document.querySelector(target.dataset.target);
    t.classList.add('active');
    target.classList.add('active');
  })
})

问题根源与修复逻辑 #

原代码仅处理了内容区块的active类移除，遗漏了导航标签的active类清除步骤。每次点击新标签时，需要先遍历所有导航标签移除active类，再给当前点击的标签添加该类，确保同一时刻只有一个标签处于激活状态。

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