0

Реализована система табов, внутри которых так же есть вкладки. введите сюда описание изображения

Если я выбираю вкладку 2, перехожу на другой таб, потом возвращаюсь к первому, остаётся вкладка 2, тогда как нужно, чтобы при смене табов вкладка всегда возвращалась на 1.

Код для табов:

var url = location.href.split('#')[1],
    el = $('.tabs-block-service .content .item[data-id="' + url + '"]');

if (el.length > 0 && el.closest('.tabs-block-service').length > 0) {
  var parent = el.closest('.tabs-block-service'); //
  parent.find('.item.--active').removeClass('--active');
  parent.find('.tabs .item[href*="#' + url + '"]').addClass('--active');
  parent.find('.content .item[data-id="' + url + '"]').addClass('--active');
}

$('.tabs-block-service .tabs').on('click', '.item', function () {
  if (!$(this).hasClass('--active')) {
    var _parent = $(this).closest('.tabs-block-service'),
        id = $(this).attr('href').split('#')[1]; //


    _parent.find('.item.--active').removeClass('--active');

    _parent.find('.content .item[data-id="' + id + '"]').addClass('--active');

    $(this).addClass('--active');
  }
  
  // Переход на 1 слайд по нажатию на табы   
  mySwiper4.slideTo(0);
  mySwiper5.slideTo(0);
  mySwiper53.slideTo(0);
  mySwiper54.slideTo(0);
  mySwiper55.slideTo(0);
  mySwiper26.slideTo(0);
  mySwiper27.slideTo(0);
  
});

Код для вкладок:

$(function() {
  
  $('ul.tabs__nav').on('click', 'li:not(.active)', function() {
    $(this)
      .addClass('active').siblings().removeClass('active')
      .closest('div.tabs-page').find('div.tabs__pane').removeClass('active').eq($(this).index()).addClass('active');
      
    // Проверка высоты у заголовков li в описании на странице "Проектирование"
    $(".des-info__wrapper h2").each(function() {
        var $minHeight = 20;
        if ( $(this).height() > $minHeight) {
            $(this).addClass( "_fix" );
        }
    });
  });

});

Как я могу это сделать?

1
  • При каждом переходе сбрасывайте active и давайте его первому элементу.
    – De.Minov
    26 янв 2021 в 6:29

2 ответа 2

1

Где-то вы не сбрасываете active. Нашел такой код;:

$('ul.tabs__caption').on('click', 'li:not(.active)', function() {
    $(this)
  .addClass('active').siblings().removeClass('active')

.closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active'); });

Он работает. Названия классов доожны быть понятны.

Полный пример: https://codepen.io/deniscreative/pen/rwPrKw

0

Решение выглядит следующим образом (замечу, что оно не моё, а принадлежит другому человеку):

// При смене таба
$('.tabs-block-service .tabs').on('click', '.item', function () {
    var $item = $(this);
   // Клик по вкладке "Галерея"
   $('.first-element').trigger('click');
});

Срабатывает нажатие по классу .first-element, а сам класс: .first-element присвоил на первую вкладку.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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