@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) при нажатии на кнопки, но чтобы срабатывало вперед/назад.
  • Вопрос задан
  • 350 просмотров
Решения вопроса 1
DanArst
@DanArst Куратор тега JavaScript
Гриффиндор в моде при любой погоде!
Если у вас эти кнопки расположены внутри 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');
        }
    }
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы