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

debugcn 发表于 Dev

维金塔斯（Vikintas Raudavicius）

因此，我有这个基本的标签模块，应该在单击按钮后显示其各自的内容。我设法使其打开并在单击后显示内容。但是，其他的也保持开放状态。

我的问题是：如何做到这一点，所以当单击并打开一个选项卡时，其他选项卡会隐藏吗？

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>

灰

似乎您正在使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。