template-for-verstka/assets/js/tabs.js

const rootSelectorTabs = '[data-js-tabs]';

class Tabs{
    // элементы для поиска
    selectors = {
        root: rootSelectorTabs,
        button: '[data-js-tabs-button]',
        content: '[data-js-tabs-content]',
    }
    // класс отображения состояния
    stateClasses = {
        isActive: 'active',
    }

    constructor(rootElement){
        this.rootElement = rootElement;
        this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button);
        this.contentElements = this.rootElement.querySelectorAll(this.selectors.content);
        this.state = {
            activeMenuIndex: [...this.buttonElements]
                .findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)),
        };
        this.limitTabsIndex = this.buttonElements.length - 1;
        this.bindEvents();
    }

    updateUI(){
        const { activeMenuIndex } = this.state;

        this.buttonElements.forEach((buttonElement, index) => {
            const isActive = index === activeMenuIndex;

            buttonElement.classList.toggle(this.stateClasses.isActive, isActive);
        })

        this.contentElements.forEach((contentElement, index) => {
            const isActive = index === activeMenuIndex;

            contentElement.classList.toggle(this.stateClasses.isActive, isActive);
        })
    }

    onButtonClick(buttonIndex){
        this.state.activeMenuIndex = buttonIndex;
        this.updateUI();
    }

    bindEvents(){
        this.buttonElements.forEach((buttonElement, index) => {
            buttonElement.addEventListener('click', () => this.onButtonClick(index))
        })
    }
}

class TabsCollection {
    constructor(){
        this.init();
    }

    init(){
        document.querySelectorAll(rootSelectorTabs).forEach((element) => {
            new Tabs(element);
        });
    }
}

export default TabsCollection;