Vanilla Javascript 显示选项卡并隐藏其他选项卡

Question

现在我正在重新创建一个 Bootstrap 元素“Toggleable / Dynamic Tabs”（你可以在那里找到它 - https://www.w3schools.com/bootstrap4/bootstrap_navs.asp），但我无法让我的内容运行。 “标签”按预期工作，但我不知道如何让它们在单击我想要的方式后显示内容。我希望它们在单击时显示“链接”的 div，并隐藏链接到其他按钮的 div。就像引导元素一样。非常感谢！

我有这样的东西：http://jsfiddle.net/Darlington/9kjst3rp/8

let tabs = Array.from(document.querySelectorAll('.subnavBtn'));

const handleClick = (e) => {
  e.preventDefault();
  tabs.forEach(node => {
    node.classList.remove('active-btn');
  });
  e.currentTarget.classList.add('active-btn');

}

tabs.forEach(node => {
  node.addEventListener('click', handleClick)
});

.subnavDiv {
  display: none;
}

.active {
  display: block;
}

.active-btn {
  background-color: red;
}

<nav class="subnav">
 <button class="subnavBtn">
   Button 1
 </button>

 <button class="subnavBtn">
   Button 2
 </button>

 <button class="subnavBtn">
   Button 3
 </button>
</nav>

<!-- DIVS I WANT TO SHOW -->

<div class="subnavDiv active">
Content 1
</div>

<div class="subnavDiv">
Content 2
</div>

<div class="subnavDiv">
Content 3
</div>

Answer 1

@Maheer Ali 的回答很好，这是使用data attributes 指定与每个按钮关联的选项卡的替代方法：

const buttons = document.querySelectorAll('.subnavBtn');
const divs = document.querySelectorAll('.subnavDiv');

const handleClick = e => {
  e.preventDefault();
  
  // Buttons
  buttons.forEach(node => node.classList.remove('active-btn'));
  e.currentTarget.classList.add('active-btn');
  
  // Divs (tabs)
  divs.forEach(node => node.classList.remove('active'));
  [...divs].filter(div => div.dataset.tab === e.currentTarget.dataset.tab)[0].classList.add('active');
}

buttons.forEach(node => node.addEventListener('click', handleClick));

.subnavDiv { display: none; }
.active { display: block; }
.active-btn { background-color: red; }

<nav class="subnav">
 <button class="subnavBtn active-btn" data-tab="1">Button 1</button>
 <button class="subnavBtn" data-tab="2">Button 2</button>
 <button class="subnavBtn" data-tab="3">Button 3</button>
</nav>

<div class="subnavDiv active" data-tab="1">Content 1</div>
<div class="subnavDiv" data-tab="2">Content 2</div>
<div class="subnavDiv" data-tab="3">Content 3</div>

Answer 2

您可以按照以下步骤进行操作

• 将所有 div（内容）存储在全局范围内的数组中
• 将第二个变量btn 传递给handleClick
• 在forEach() 中将当前索引的元素作为第二个参数发送到handleClick
• 在 handleClick 内，从所有 div 中删除 active 类
• 最后将active类添加到btn（函数的第二个参数）

let tabs = Array.from(document.querySelectorAll('.subnavBtn'));
let contents = Array.from(document.querySelectorAll('.subnavDiv'));


const handleClick = (e,btn) => {
  e.preventDefault();
  tabs.forEach(node => {
    node.classList.remove('active-btn');
  });
  e.currentTarget.classList.add('active-btn');
  contents.forEach(x => x.classList.remove('active'))
  btn.classList.add('active');

}

tabs.forEach((node,i) => {
  node.addEventListener('click',(e) => handleClick(e,contents[i]))
});

.subnavDiv {
  display: none;
}

.active {
  display: block;
}

.active-btn {
  background-color: red;
}

<nav class="subnav">
 <button class="subnavBtn">
   Button 1
 </button>

 <button class="subnavBtn">
   Button 2
 </button>

 <button class="subnavBtn">
   Button 3
 </button>
</nav>

<!-- DIVS I WANT TO SHOW -->

<div class="subnavDiv active">
Content 1
</div>

<div class="subnavDiv">
Content 2
</div>

<div class="subnavDiv">
Content 3
</div>