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

Question

[zanzoS]

У меня есть скрипт для табов:

$('.services__content').each(function(){

    let tabTabs = $(this).find('ul.tabs li');
    let tabItems = $(this).find('.tab_content').hide();
    $(".tab_container .tab_content.active").show();
    tabTabs.each(function(i){
      $(this).click(function(){
        $(this).addClass('active').show();
        tabTabs.not(this).removeClass('active');
        $(tabItems[i]).addClass('active').show();
        tabItems.not(tabItems[i]).removeClass('active').hide();
      });
    });
    
});

HTML структура:

<div class="services__content">
                
    <ul class="tabs" id="development">
        <li class="active"><a>Первый</a></li>
        <li><a>Второй</a></li>
        <li><a>Третий</a></li>
        <li><a>Четвертый</a></li>
    </ul>

    <div class="tab_container">

        <div class="tab_content active" id="development1">

            <div class="info__block">

                <p class="title">Заголов</p>
                <p class="text">Текст</p>

                <div class="button">

                    <div class="btn__arrow__stroke">
                        Пред.
                    </div>

                    <div class="btn__arrow__stroke">
                        Некст
                    </div>

                </div>

        </div>

        <div class="tab_content" id="development2">Второй</div>
        <div class="tab_content" id="development3">Третий</div>
        <div class="tab_content" id="development4">Четвертый</div>

    </div>

</div>

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

Примерно понимаю логику, но не знаю как реализовать. Должно выполнятся действия tabTabs.each(function(i) при нажатии на кнопки, но чтобы срабатывало вперед/назад.

Answer 1

[Danny Arty]

Если у вас эти кнопки расположены внутри tab-а, значит они должны быть внутри каждого.
А скрипт будет такой:

$('.btn__arrow__stroke').click(function() {
    
    let tabsContent = $(this).closest('.tab_content.active');
    let tabsToggler = $(this).closest('.tab_container').prev().find('li.active');
    let dir = $(this).text().trim() == 'Пред.' ? 'prev' : 'next';

    if (dir == 'prev') {
        if (tabsToggler.prev().length) {
            tabsToggler.prev().addClass('active').siblings().removeClass('active');
            tabsContent.prev().show().addClass('active').siblings().hide().removeClass('active');
        }
    } else {
        if (tabsToggler.next().length) {
            tabsToggler.next().addClass('active').siblings().removeClass('active');
            tabsContent.next().show().addClass('active').siblings().hide().removeClass('active');
        }
    }
});

Comments

[zanzoS]

Есть две проблемы. В вашем варианте, когда я нажимаю на кнопки контент новой вкладки показывается, а старый не убирается. Я добавил hide()

$('.btn__arrow__stroke').click(function() {

  let dir = $(this).text() == 'Пред.' ? 'prev' : 'next';

  if (dir == 'prev') {
      if ($('ul.tabs li.active').prev().length) {
          $('ul.tabs li.active').prev().addClass('active').siblings().removeClass('active');
          $('.tab_content.active').prev().show().addClass('active').siblings().hide().removeClass('active');
      }
  } else {
      if ($('ul.tabs li.active').next().length) {
          $('ul.tabs li.active').next().addClass('active').siblings().removeClass('active');
          $('.tab_content.active').next().show().addClass('active').siblings().hide().removeClass('active');
      }
  }
});

Вторая проблема в том, что при нажатии на кнопку Пред. она работает как кнопка Некст. Показывает только следующую вкладку.

[Danny Arty]

zanzoS, обновил ответ, не учел, что судя по верстке в тексте могут быть пробелы в начале и конце строки. Проверьте текущий вариант

[zanzoS]

Danny Arty, да, работает. Но только если только один таб. (Нужно было указать сразу что несколько табов будет).
Сейчас попробую что ни будь придумать.

[Danny Arty]

zanzoS, переделал для нескольких табов на странице. Если решение верно, то будьте добры его отметить

[zanzoS]

Danny Arty, спасибо большое

[Danny Arty]

zanzoS, пожалуйста)