</> Praktum

Главная / JavaScript / Вкладки без перехода на другую страницу

Урок 25 · JavaScript

Одна видимая панель из нескольких

Характеристики, доставка и отзывы могут жить на одной странице, если видна только выбранная панель.

Почему это следующий шаг

Окно подтверждения уже открывается. Вкладки — соседний приём: менять кусок страницы, не уводя с неё.

Как сделать

Кнопки вкладок и панели положи в HTML сразу. Активной панели не ставь hidden, остальным поставь. По клику сними hidden с выбранной и верни остальным. У текущей кнопки поменяй aria-selected. Не удаляй панели из DOM: их содержимое ещё пригодится при возврате.

buttons.forEach((button) => {
  button.addEventListener("click", () => show(button.dataset.panel));
});

Что проверить

  • При загрузке видна одна панель.
  • Клик показывает другую и прячет прежнюю.
  • У активной кнопки другое состояние.

Попробуй

Собери две вкладки и переключай их без перезагрузки.