Табы (вкладки)

<div class="tablist">
  <button class="tab-btn tab-btn--1 tab-btn--active" type="button">Вкладка 1</button>
  <button class="tab-btn tab-btn--2" type="button">Вкладка 2</button>
  <button class="tab-btn tab-btn--3" type="button">Вкладка 3</button>
  <button class="tab-btn tab-btn--4" type="button">Вкладка 4</button>
</div>

<div class="tab-content">
  <div class="tab-pane tab-pane--1">
    <h2>Вкладка 1</h2>
    <p>Съешь ещё этих мягких французских булок, да выпей чаю. В чащах юга жил бы цитрус? Да, но фальшивый экземпляр! Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства.</p>
    <p>Съешь ещё этих мягких французских булок, да выпей чаю. В чащах юга жил бы цитрус? Да, но фальшивый экземпляр! Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства.</p>
    <img src="https://kak-eto-verstat.ru/wp-content/uploads/2025/07/placeholder-150.png" alt="img" style="width: 150px;">
  </div>

  <div class="tab-pane tab-pane--2 tab-pane--hidden">
    <h2>Вкладка 2</h2>
    <p>Съешь ещё этих мягких французских булок, да выпей чаю. В чащах юга жил бы цитрус? Да, но фальшивый экземпляр! Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства.</p>
    <img src="https://kak-eto-verstat.ru/wp-content/uploads/2025/07/placeholder.png" alt="img" style="width: 150px;">
  </div>

  <div class="tab-pane tab-pane--3 tab-pane--hidden">
    <h2>Вкладка 3</h2>
    <img src="https://kak-eto-verstat.ru/wp-content/uploads/2025/07/placeholder.png" alt="img" style="width: 150px;">
  </div>

  <div class="tab-pane tab-pane--4 tab-pane--hidden">
    <h2>Вкладка 4</h2>
    <p>Съешь ещё этих мягких французских булок, да выпей чаю. В чащах юга жил бы цитрус? Да, но фальшивый экземпляр! Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства.</p>
    <p>Съешь ещё этих мягких французских булок, да выпей чаю. В чащах юга жил бы цитрус? Да, но фальшивый экземпляр! Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства.</p>
  </div>
</div>

.tablist {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 14px;
  width: 100%;
  justify-content: center;
}

.tab-btn {
  align-items: center;
  background-color: #f0f0f0;
  color: #131313;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 400;
  justify-content: center;
  line-height: 1.1;
  padding: 10px 34px;
}

.tab-content {
  width: 100%;
}

.tab-btn--active {
  background-color: #2e4a82;
  color: #fff;
}

.tab-pane {
  border: 1px solid #00000028;
  background-color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  padding: 30px 30px;
  width: 100%;
}

.tab-pane h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.tab-pane > * {
  margin-bottom: 12px;
}

.tab-pane > *:last-child {
  margin-bottom: 0;
}

.tab-pane--hidden {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: none;
  position: absolute;
}

@media (max-width: 950px) {
  .tablist {
    justify-content: flex-start;
    padding-right: 10px;
  }
}


@media (max-width: 500px) {
  .tablist {
    column-gap: 10px;
    margin-bottom: 10px;
  }

  .tab-btn {
    font-size: 14px;
  }

  .tab-pane {
    padding: 15px;
  }

  .tab-pane h2 {
    font-size: 14px;
  }

  .tab-pane p {
    font-size: 14px;
  }
}

window.addEventListener( 'load', () => {

  const tablists = document.querySelectorAll( '.tablist' );

  tablists.forEach( tablist => {
    const tabs = tablist.querySelectorAll( '.tab-btn' );
    const tabContent = tablist.nextElementSibling;
    const panes = tabContent?.querySelectorAll( '.tab-pane' );

    if ( !tabs.length || !panes?.length ) return;

    tabs.forEach( tab => {
      tab.addEventListener( 'click', () => {
        const index = tab.className.match( /tab-btn--(\d+)/ )?.[1];

        tabs.forEach( t => t.classList.remove( 'tab-btn--active' ) );
        tab.classList.add( 'tab-btn--active' );

        panes.forEach( pane => {
          const paneIndex = pane.className.match( /tab-pane--(\d+)/ )?.[1];
          if ( paneIndex === index ) {
            pane.classList.remove( 'tab-pane--hidden' );
          } else {
            pane.classList.add( 'tab-pane--hidden' );
          }
        });
      });
    });
  });

});