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 codepen。它不是完全优化的（代码中有冗余），但效果很好：）

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

编辑：添加了“上一步”按钮返回

使用按钮切换标签

2 个答案: