javascript - 单击时在公式 (div) 中显示下一个选项卡

Question

我有多个带有类选项卡的 div <div class="tab">i am div 1</div><div class="tab">i am div 2 </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';
    }
}

但是当我这样做时，所有选项卡都会消失，并且不会显示任何内容。错误在哪里？

Answer 1

您可以引入一个变量来捕获当前选项卡 - 在我的代码中 currentVisible 。在此基础上，您可以操纵想要在 UI 上看到的选项卡。您也可以使用 .forEach()迭代所有 <div>具有 tab 的元素添加了类。最后，您可以使用 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>

希望这会有所帮助!