Реинициализация скрипта при нажатии на табы

Question

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

Если я выбираю вкладку 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" );
        }
    });
  });

});

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

Answer 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

Answer 2

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

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

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

БЛОГ НА HUSL

Реинициализация скрипта при нажатии на табы

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