javascript - 如何在一个打开时删除其他选项卡

Question

所以，我有这个基本的选项卡模块，它应该在单击按钮后显示其各自的内容。我已经设法打开它并在单击后显示内容。然而，其他的也保持开放。

我的问题是:如何才能在单击并打开一个选项卡时隐藏其他选项卡？

const button = document.querySelectorAll('.tabButton');

button.forEach(function(btn) {
  btn.addEventListener('click', tabClick, false);
})

function tabClick(event) {

  let currentTab = document.querySelectorAll('.active');

  currentTab.forEach(function(tab) {
    tab.className = tab.className.replace('active' , '');
    event.target.parentElement.className += ' active';
    document.getElementById(event.target.href.split('#')[1]).classList.add('on');
  })
};

<div class='tabsBox'>
  <div class='tabButtons'>
    <ul>
      <li id='test' class='active'><a class='tabButton' href='#tab1'>Button 1</a></li>
      <li ><a class='tabButton' href='#tab2'>Button 2</a></li>
      <li ><a class='tabButton' href='#tab3'>Button 3</a></li>
    </ul>
  </div>
  <div class='tabsContent'>
    <div class='tabInner' active id='tab1'>
      <h2>Title</h2> 
      <p>Lorem ipsum dolor sit</p>
    </div>
    <div class='tabInner' active id='tab2'>
      <h2>Title</h2> 
      <p>Lorem ipsum dolor sit2</p>
    </div>
    <div class='tabInner' active id='tab3'>
      <h2>Title</h2> 
      <p>Lorem ipsum dolor sit3</p>
    </div>
  </div>
</div>

Answer 1

看起来好像您正在使用 CSS 类 .on 来应用样式，因此在您设置之前，您可以使用 获取所有选项卡内容 div .tabInner 并删除 .on 类:document.querySelectorAll('.tabInner').forEach(el => el.classList.remove('on'));

您的问题没有包含任何样式，因此我的代码基于 .on 类正在处理显示样式的假设。

以下是我认为您所追求的工作片段。我修改了您的部分 JS 代码以一致地使用 classList 并交换为箭头函数 () => {}。

const button = document.querySelectorAll('.tabButton');

button.forEach(btn => btn.addEventListener('click', tabClick, false));

function tabClick(event) {

  const currentTab = document.querySelectorAll('.active');

  currentTab.forEach(tab => {
    tab.classList.remove('active');
    event.target.parentElement.classList.add('active');
    document.querySelectorAll('.tabInner').forEach(el => el.classList.remove('on'));
    document.getElementById(event.target.href.split('#')[1]).classList.add('on');
  })
};

.tabInner {
  display: none;
}

.tabInner.on {
  display: block;
}

<div class='tabsBox'>
  <div class='tabButtons'>
    <ul>
      <li id='test' class='active'><a class='tabButton' href='#tab1'>Button 1</a></li>
      <li><a class='tabButton' href='#tab2'>Button 2</a></li>
      <li><a class='tabButton' href='#tab3'>Button 3</a></li>
    </ul>
  </div>
  <div class='tabsContent'>
    <div class='tabInner' active id='tab1'>
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit</p>
    </div>
    <div class='tabInner' active id='tab2'>
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit2</p>
    </div>
    <div class='tabInner' active id='tab3'>
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit3</p>
    </div>
  </div>
</div>