Javascript 使用按钮切换选项卡

当我网页的用户按tab 2时，如果他按next，我想向他显示next tab。i、 e.表3。我不知道如何将这两种价值观联系起来

如果我们能够将制表符值存储在某个地方，并且按钮可以访问该值，那么在这些之后，我们可以通过递增或递减来更改制表符

---

我想将选项卡与按钮关联起来。当用户单击选项卡3时，它将打开选项卡3并隐藏其他选项卡。当用户单击“下一步”按钮时，应显示选项卡4。

我为您创建了一个小型vanillaJS代码笔。它不是完全优化的（代码中的冗余），但工作正常：）

document.queryselectoral（“.tabscontroller a”）.forEach（函数（e）{
e、 addEventListener（“单击”，函数（）{
//删除所有活动的
document.queryselectoral（“.tabscontroller a.active，.tabs>.tab.active”）.forEach（函数（b）{
b、 类列表。删除（“活动”）；
});
//激活标签
e、 类列表。添加（“活动”）；
var tabid=e.getAttribute（“数据选项卡”）；
document.querySelector（“.tab[data tab='”+tabid+']”））.classList.add（“active”）；
});
})
//下一个按钮
document.querySelector（“下一步”）.addEventListener（“单击”，函数（）{
var tabid=parseInt（document.querySelector（“.tabs>.tab.active”）.getAttribute（“数据选项卡”））+1；
如果（tabid>document.queryselectoral（“.tabscontroller a”）.length）tabid=1；
document.queryselectoral（“.tabscontroller a.active，.tabs>.tab.active”）.forEach（函数（b）{
b、 类列表。删除（“活动”）；
});
document.queryselectoral（“.tabscontroller a[data tab='”+tabid+']，.tabs>.tab[data tab='“+tabid+'”]）。forEach（函数（b）{
b、 类列表。添加（“活动”）；
});
});
//上一个按钮
document.querySelector（“#back”）.addEventListener（“单击”，函数（）{
var tabid=parseInt（document.querySelector（“.tabs>.tab.active”）.getAttribute（“数据选项卡”）-1；
如果（tabid<1）tabid=document.queryselectoral（“.tabscontroller a”）.length；
document.queryselectoral（“.tabscontroller a.active，.tabs>.tab.active”）.forEach（函数（b）{
b、 类列表。删除（“活动”）；
});
document.queryselectoral（“.tabscontroller a[data tab='”+tabid+']，.tabs>.tab[data tab='“+tabid+'”]）。forEach（函数（b）{
b、 类列表。添加（“活动”）；
});
});

---

编辑：添加了Prev按钮后退

这里是一个使用HTML上的数据属性的基本实现

Idea是在单击按钮时检索数据属性值（对应HTML选项卡内容的id），并使其处于活动状态，同时隐藏所有其他内容

const-buttons=document.queryselectoral（“.tab-container>button”）；
const content=document.queryselectoral（“.tab内容容器>*”）；
按钮。forEach（按钮=>{
按钮。addEventListener（“单击”，函数（e）{
const id=this.dataset.target；
const target=document.querySelector（id）；
content.forEach（ele=>{
如果（ele==target）ele.classList.add（“活动”）；
else ele.classList.remove（“active”）；
});
});
});
.tab内容容器{
可见性：隐藏；
}
.tab内容容器>.active{
能见度：可见；
背景颜色：蓝色；
}

内容1
内容2
表1
表2
您是否考虑过使用任何框架？Bootstrap有一个标签的完整解决方案。我想要的是，通过按钮更改标签。这个问题已经回答了很多次。请回顾这篇文章：欢迎来到堆栈溢出。请说明您有多少选项卡。请在问题中加入一个。完美。我们也可以做上一个按钮吗。我是javascript的新手。查询选择器不好，所以请在代码笔中添加“后退”按钮，我也在响应中添加了解释。
document.querySelectorAll(".tabscontroller a").forEach(function(e) {
  e.addEventListener("click", function() {
    // Removing all active
    document.querySelectorAll(".tabscontroller a.active, .tabs > .tab.active").forEach(function(b) {
      b.classList.remove("active");
    });

    // Activating tab
    e.classList.add("active");
    var tabid = e.getAttribute("data-tab");
    document.querySelector(".tab[data-tab='"+ tabid +"']").classList.add("active");
  });
})

// Next button
document.querySelector("#next").addEventListener("click", function() {
  var tabid = parseInt(document.querySelector(".tabs > .tab.active").getAttribute("data-tab"))+1;
  if(tabid > document.querySelectorAll(".tabscontroller a").length) tabid = 1;
  document.querySelectorAll(".tabscontroller a.active, .tabs > .tab.active").forEach(function(b) {
      b.classList.remove("active");
  });
  document.querySelectorAll(".tabscontroller a[data-tab='"+tabid+"'], .tabs > .tab[data-tab='"+tabid+"']").forEach(function(b) {
      b.classList.add("active");
    });
});

// Prev button
document.querySelector("#back").addEventListener("click", function() {
  var tabid = parseInt(document.querySelector(".tabs > .tab.active").getAttribute("data-tab"))-1;
  if(tabid < 1) tabid = document.querySelectorAll(".tabscontroller a").length;
  document.querySelectorAll(".tabscontroller a.active, .tabs > .tab.active").forEach(function(b) {
      b.classList.remove("active");
  });
  document.querySelectorAll(".tabscontroller a[data-tab='"+tabid+"'], .tabs > .tab[data-tab='"+tabid+"']").forEach(function(b) {
      b.classList.add("active");
    });
});