使用按钮切换选项卡[关闭]

Question

当我的网页用户按下选项卡 2 时，如果他按下下一个，我想向他显示下一个选项卡。即标签 3。我不知道如何将这两个值相互关联。

如果我们能够将选项卡值存储在某处并且按钮可以访问该值，那么在这些之后我们可以通过递增或递减来更改选项卡。

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

Answer 1

这是在 HTML 上使用数据属性的基本实现。

想法是单击按钮以检索数据属性值（相应 HTML 选项卡内容的 ID）并使其处于活动状态，同时隐藏所有其他内容。

const buttons = document.querySelectorAll(".tab-container > button");
const content = document.querySelectorAll(".tab-content-container > *");

buttons.forEach(button=>{
  button.addEventListener("click", function(e){
      const id = this.dataset.target;
      const target = document.querySelector(id);
      content.forEach(ele=>{
        if(ele === target) ele.classList.add("active");
        else ele.classList.remove("active");
      });
  });
});

.tab-content-container {
  visibility: hidden;
}

.tab-content-container > .active {
  visibility: visible;
  background-color: blue;
}

<div class="tab-content-container">
  <div id="content-1">
    Content 1
  </div>

  <div id="content-2">
    Content 2
  </div>
</div>
<div class="tab-container">
  <button data-target="#content-1">Tab 1</button>
  <button data-target="#content-2">Tab 2</button>
</div>

Answer 2

我为您创建了一个小型 vanillaJS 代码笔。它没有完全优化（代码冗余），但它工作正常:)

https://codepen.io/anon/pen/BMqgNp

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");
    });
});

编辑：添加上一个按钮返回