2

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

$(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>

1 ответ 1

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>

4
  • табов будет больше двух Commented 10 июн. 2021 в 15:25
  • @hellokitViki, тогда нужно понять, что будет при достижении последнего таба. И как можно будет вернуться обратно. По логике тогда должны быть 2 кнопки - далее и назад Commented 10 июн. 2021 в 15:28
  • на последнем табе кнопка далее будет меняться на отправить. И переключение больше не понадобится. Как для квиза. Commented 10 июн. 2021 в 15:30
  • @hellokitViki, я откорректировал ответ Commented 10 июн. 2021 в 15:42

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.