Question

现在我正在重新创建Bootstrap元素“可切换/动态选项卡”（您可以在此处找到-https://www.w3schools.com/bootstrap4/bootstrap_navs.asp），但是我无法运行我的内容。 “标签”按预期工作，但我不知道如何在单击所需的标签后使它们显示内容。我希望他们在单击时显示“链接的” div，并隐藏链接到其他按钮的div。就像bootstrap元素一样。非常感谢你！

我有类似这样的内容：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

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

将所有divs（内容）存储在全局范围的数组中
为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>

Answer 2

@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>

Vanilla Javascript显示标签并隐藏其他

2 个答案: