Создание табов (вкладок)

const tabHeaders = document.querySelectorAll('.tab-header');
const tabContents = document.querySelectorAll('.tab-content');

tabHeaders.forEach((tabHeader, index) => {
  tabHeader.addEventListener(input__1, () => {
    tabContents.forEach(content => {
      content.classList.input__2('active');
    });

    tabContents[input__3].classList.add(input__4);
  });
});

const tabHeaders = document.querySelectorAll('.tab-header');
const tabContents = document.querySelectorAll('.tab-content');

tabHeaders.forEach((tabHeader, index) => {
  tabHeader.addEventListener('click', () => {
    tabHeaders.forEach(header => {
      header.classList.input__1(input__2);
    });
    tabHeader.classList.input__3(input__4);

    tabContents.forEach(content => {
      content.classList.remove('active');
    });
    tabContents[index].classList.add('active');
  });
});

const tabHeaders = document.querySelectorAll('.tab-header');
const tabContents = document.querySelectorAll('.tab-content');

tabHeaders.forEach(tabHeader => {
  tabHeader.addEventListener('click', () => {
    tabHeaders.forEach(header => {
      header.classList.remove('active');
    });
    tabHeader.classList.add('active');

    const tabId = tabHeader.dataset.input__1;

    tabContents.forEach(content => {
      content.classList.remove('active');
    });

    document.querySelector(`.tab-content[data-tab="${input__2}"]`).classList.add('active');
  });
});

function createTabs(tabsData) {
  const tabsContainer = document.querySelector('.tabs');
  const contentsContainer = document.querySelector('.tab-contents');

  tabsData.forEach((tabData, index) => {
    const tabHeader = document.input__1('div');
    tabHeader.classList.add('tab-header');
    tabHeader.textContent = tabData.title;
    tabHeader.dataset.tab = index + 1;
    tabsContainer.appendChild(tabHeader);

    const tabContent = document.createElement('div');
    tabContent.classList.add('tab-content');
    tabContent.textContent = tabData.content;
    tabContent.dataset.tab = index + 1;
    if (index === 0) {
      tabHeader.classList.add('active');
      tabContent.classList.add(input__2);
    }
    contentsContainer.input__3(tabContent);
  });

  const tabHeaders = document.querySelectorAll('.tab-header');
    tabHeaders.forEach(tabHeader => {
      tabHeader.addEventListener('click', () => {
        tabHeaders.forEach(header => {
          header.classList.remove('active');
        });
        tabHeader.classList.add('active');
        const tabId = tabHeader.dataset.tab;
        const tabContents = document.querySelectorAll('.tab-content');
        tabContents.forEach(content => {
          content.classList.remove('active');
        });
        document.querySelector(`.tab-content[data-tab="${tabId}"]`).classList.add('active');
    });
  });
}

const tabsData = [
  { title: 'Tab 1', content: 'Content 1' },
  { title: 'Tab 2', content: 'Content 2' },
  { title: 'Tab 3', content: 'Content 3' }
];

createTabs(tabsData);

const tabHeaders = document.querySelectorAll('.tab-header');
const tabContents = document.querySelectorAll('.tab-content');

tabHeaders.forEach(tabHeader => {
  tabHeader.addEventListener('click', () => {
    tabHeaders.forEach(header => {
      header.classList.remove('active');
    });
    tabHeader.classList.add(input__1);

    const tabId = tabHeader.input__2.tab;

    tabContents.forEach(content => {
      content.classList.remove('active');
    });

    document.querySelector(`.tab-content[data-tab="${tabId}"]`).classList.add('active');
  });
});

const tabHeaders = document.querySelectorAll('.tab-header');
const tabContents = document.querySelectorAll('.tab-content');

tabHeaders.forEach(tabHeader => {
  tabHeader.addEventListener('click', () => {
    tabHeaders.forEach(header => header.classList.remove('active'));
    tabHeader.classList.add('active');
    const tabId = tabHeader.dataset.tab;
    tabContents.forEach(content => content.classList.remove('active'));
    document.querySelector(`.tab-content[data-tab="${tabId}"]`).classList.add('active');
  });
});

const closeButtons = document.querySelectorAll(input__1);
closeButtons.forEach(button => {
  button.addEventListener('click', () => {
    const tabContent = button.closest(input__2);
    const tabId = tabContent.dataset.tab;
    tabContent.input__3();
    document.querySelector(`.tab-header[data-tab="${input__4}"]`).remove();

  });
});

const maxTabs = 3;

function createTabs(tabsData) {
  const tabsContainer = document.querySelector('.tabs');
  const contentsContainer = document.querySelector('.tab-contents');

  tabsData.forEach((tabData, index) => {
    if (input__1.querySelectorAll('.tab-header').length >= maxTabs) {
      return;
    }

    const tabHeader = document.createElement('div');
    tabHeader.classList.add('tab-header');
    tabHeader.textContent = tabData.title;
    tabHeader.dataset.tab = index + 1;
    tabsContainer.appendChild(tabHeader);

    const tabContent = document.createElement('div');
    tabContent.classList.add('tab-content');
    tabContent.textContent = tabData.content;
    tabContent.dataset.tab = index + 1;
    if (index === 0) {
      tabHeader.classList.add('active');
      tabContent.classList.add('active');
    }
    contentsContainer.appendChild(tabContent);
  });

    const tabHeaders = document.querySelectorAll('.tab-header');
    tabHeaders.forEach(tabHeader => {
      tabHeader.addEventListener('click', () => {
        tabHeaders.forEach(header => {
          header.classList.remove('active');
        });
        tabHeader.classList.add('active');
        const tabId = tabHeader.dataset.tab;
        const tabContents = document.querySelectorAll('.tab-content');
        tabContents.forEach(content => {
          content.classList.remove('active');
        });
        document.querySelector(`.tab-content[data-tab="${tabId}"]`).classList.add('active');
      });
    });
}

const tabsData = [
  { title: 'Tab 1', content: 'Content 1' },
  { title: 'Tab 2', content: 'Content 2' },
  { title: 'Tab 3', content: 'Content 3' },
  { title: 'Tab 4', content: 'Content 4' }
];

createTabs(tabsData);