https://g-labtelecom.com.br/assets/js/tabs.js

1import { observeReveal } from "./scrollReveal.js";
2
3export function initTabs() {
4  const tabBtns = document.querySelectorAll(".tab-btn");
5  const tabPanels = document.querySelectorAll(".planos__content");
6
7  if (!tabBtns.length || !tabPanels.length) return;
8
9  tabBtns.forEach((btn) => {
10    btn.addEventListener("click", () => {
11      /* Desativa todos os botões e painéis */
12      tabBtns.forEach((b) => {
13        b.classList.remove("tab-btn--active");
14        b.setAttribute("aria-selected", "false");
15      });
16      tabPanels.forEach((p) => p.classList.add("is-hidden"));
17
18      /* Ativa o botão clicado */
19      btn.classList.add("tab-btn--active");
20      btn.setAttribute("aria-selected", "true");
21
22      /* Exibe o painel correspondente ao data-tab do botão */
23      const panel = document.getElementById(`tab-${btn.dataset.tab}`);
24      if (panel) {
25        panel.classList.remove("is-hidden");
26        /* Re-observa .reveal nos novos cards visíveis */
27        observeReveal();
28      }
29    });
30  });
31}