单击在公式（div）中显示下一个选项卡答案

【问题标题】：On click show next tab in formular (div)单击在公式（div）中显示下一个选项卡
【发布时间】：2020-04-19 11:16:13
【问题描述】：

我有多个带有类标签<div class="tab">i am div 1</div><div class="tab">i am div 2 </div> 的div。在里面我在底部有一些输入字段我有一个下一步和返回按钮

    <div class="funnel-buttons text-right">
                        <button type="button" class="icon-btn" id="prevBtn">Back</button>
                        <button type="button" class="icon-btn" id="nextBtn" onclick="nextTab()">Next</button>
    </div>

现在单击下一个或后退按钮后，我希望显示下一个或上一个 div，因此我在显示 tab[0] 并单击下一个时创建了一个 JS 函数，我应该消失。

const tab = document.getElementsByClassName('tab');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
tab[0].style.display = 'block';
tab[1].style.display = 'none';

function nextTab () {
    if(tab[0].style.display == 'block') {
        tab[1].style.display = 'block';
        tab[0].style.display = 'none';
    }
}

但是当我这样做时，所有选项卡都消失了，什么也没有显示。哪里出错了？

【问题讨论】：

你可以尝试可见性 'hidden' 而不是 'noe'
不，它也不起作用:(

标签： javascript html css

【解决方案1】：

你可以这样解决

const tab = document.getElementsByClassName('tab');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');




function nextTab() {
  const currentTab = document.querySelector('.show');
  const tabArray = Array.from(tab);
  const currentIndex = tabArray.indexOf(currentTab);
  console.log(currentIndex);
  currentTab.classList.remove('show');
  currentTab.classList.add('hide');
  if (tabArray.length > currentIndex + 1) {
    tabArray[currentIndex + 1].classList.remove('hide');
    tabArray[currentIndex + 1].classList.add('show');
  } else {
  // to return first tab at the end
    tabArray[0].classList.remove('hide');
    tabArray[0].classList.add('show');
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .show {
      display: block;
    }

    .hide {
      display: none;
    }
  </style>
</head>

<body>
  <div class="tab show">1</div>
  <div class="tab hide">2</div>
  <div class="tab hide">3</div>

  <div class="funnel-buttons text-right">
    <button type="button" class="icon-btn" id="prevBtn">Back</button>
    <button type="button" class="icon-btn" id="nextBtn"
      onclick="nextTab()">Next</button>
  </div>


  <script src="app.js"></script>
</body>

</html>

【讨论】：

@Dariun 如果此答案对您有用，请标记为正确（单击勾选）以供将来阅读。

【解决方案2】：

您可以在我的代码currentVisible 中引入一个变量来捕获当前选项卡。基于此，您可以操作要在 UI 上看到的选项卡。您也可以使用.forEach() 遍历所有添加了tab 类的<div> 元素。最后，您可以使用ternary operator 更改可见性，例如i === currentVisible ? 'block' : 'none'。

尝试如下：

const tab = document.getElementsByClassName('tab');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
let currentVisible = 0;

const handleTab = n => {
  if (currentVisible + n >= 0 && currentVisible + n < tab.length) {
    currentVisible += n;
    
    Array.prototype.forEach.call(tab, (e, i) => {
      tab[i].style.display = i === currentVisible ? 'block' : 'none';
    });
  }
}

handleTab(0);

<div class="funnel-buttons text-right">
  <button type="button" class="icon-btn" id="prevBtn" onclick="handleTab(-1)">Back</button>
  <button type="button" class="icon-btn" id="nextBtn" onclick="handleTab(1)">Next</button>
</div>

<div class="tab">I am div 1</div>
<div class="tab">I am div 2 </div>
<div class="tab">I am div 3</div>
<div class="tab">I am div 4 </div>

我希望这会有所帮助！

【讨论】：