При нажатии показать следующую вкладку в формуляре (div) - PullRequest
Новая
       0

При нажатии показать следующую вкладку в формуляре (div)

0 голосов
/ 19 апреля 2020

Я получил несколько дел с вкладкой класса <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, поэтому я сделал функцию JS когда отображается вкладка [0] и нажимается следующая кнопка, я должен исчезнуть. 

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';
    }
}

Но при этом все вкладки исчезают и ничего не отображается. Где ошибка?

Ответы [ 2 ]

1 голос
/ 19 апреля 2020

Вы можете решить, как это 

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>
0 голосов
/ 19 апреля 2020

Вы можете ввести переменную для захвата, которая является текущей вкладкой - в моем коде currentVisible. На основании этого вы можете управлять тем, какую вкладку вы хотите видеть в пользовательском интерфейсе. Также вы можете использовать .forEach() для перебора всех элементов <div>, в которые добавлен класс tab. Наконец, вы можете изменить видимость с помощью троичного оператора , например 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>

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...