Переключать табы по кнопке Далее

Question

Как можно сделать переключение табов по одной кнопке Далее ?

$(document).ready(function() {
  $('.btn-form').click(function(event) {
    $('.form-view').removeClass('active');
    var num = $(this).attr('data-num');
    $('#form-view' + num).addClass('active');
  });
});

.form-view {
  display: none;
}

.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-6 col-12">
  <a class="btn btn-form text-left" href="#" id="btn-form1" data-num="1">
  Таб 1
  </a>
</div>
<div class="col-lg-3 col-md-6 col-12">
  <a class="btn btn-form text-left" href="#" id="btn-form2" data-num="2">
      Таб 2
  </a>
</div>

<div class="form-group form-view my-5 pb-5 active" id="form-view1">
  результат таба 1
</div>
<div class="form-group form-view my-5 pb-5" id="form-view2">
  результат таба 2
</div>

Answer 1

В общем виде это может выглядеть так: при клике на кнопку запускаете цикл по табам, находите активный, с него активность снимаете и добавляете её следующему табу:

$('button').click(function(){
    $('.form-view').each(function(){
    if($(this).hasClass('active')) {
            $(this).removeClass('active');
      $(this).next().addClass('active');
      return false;
    }
  })
})

.form-view {
  display: none;
}

.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-lg-3 col-md-6 col-12">
  <a class="btn btn-form text-left" href="#" id="btn-form1" data-num="1">
  Таб 1
  </a>
</div>
<div class="col-lg-3 col-md-6 col-12">
  <a class="btn btn-form text-left" href="#" id="btn-form2" data-num="2">
      Таб 2
  </a>
</div>
<div class="col-lg-3 col-md-6 col-12">
  <a class="btn btn-form text-left" href="#" id="btn-form3" data-num="3">
  Таб 3
  </a>
</div>
<div class="col-lg-3 col-md-6 col-12">
  <a class="btn btn-form text-left" href="#" id="btn-form4" data-num="4">
      Таб 4
  </a>
</div>

<div class="form-group form-view my-5 pb-5 active" id="form-view1">
  результат таба 1
</div>
<div class="form-group form-view my-5 pb-5" id="form-view2">
  результат таба 2
</div>
<div class="form-group form-view my-5 pb-5" id="form-view3">
  результат таба 3
</div>
<div class="form-group form-view my-5 pb-5" id="form-view4">
  результат таба 4
</div>
<br>
<button class="forward">Далее</button>

БЛОГ НА HUSL

Переключать табы по кнопке Далее

Ответы (1 шт):