74 lines
2.2 KiB
JavaScript
74 lines
2.2 KiB
JavaScript
/* ============================================
|
|
SELECTOR DE PLANES
|
|
============================================ */
|
|
function initPlanesSelector() {
|
|
const tabs = document.querySelectorAll('.plan-tab');
|
|
const pills = document.querySelectorAll('.plan-pill');
|
|
const panels = document.querySelectorAll('.plan-panel');
|
|
|
|
if (tabs.length === 0 || panels.length === 0) return;
|
|
|
|
function activarPlan(planId) {
|
|
// Desactivar todos los tabs y pills
|
|
tabs.forEach(tab => {
|
|
tab.classList.remove('active');
|
|
tab.setAttribute('aria-selected', 'false');
|
|
});
|
|
pills.forEach(pill => {
|
|
pill.classList.remove('active');
|
|
pill.setAttribute('aria-selected', 'false');
|
|
});
|
|
|
|
// Desactivar todos los panels
|
|
panels.forEach(panel => panel.classList.remove('active'));
|
|
|
|
// Activar el tab y pill correspondientes
|
|
const tabActivo = document.querySelector(`.plan-tab[data-plan="${planId}"]`);
|
|
const pillActivo = document.querySelector(`.plan-pill[data-plan="${planId}"]`);
|
|
const panelActivo = document.getElementById(`panel-${planId}`);
|
|
|
|
if (tabActivo) {
|
|
tabActivo.classList.add('active');
|
|
tabActivo.setAttribute('aria-selected', 'true');
|
|
}
|
|
if (pillActivo) {
|
|
pillActivo.classList.add('active');
|
|
pillActivo.setAttribute('aria-selected', 'true');
|
|
}
|
|
if (panelActivo) {
|
|
panelActivo.classList.add('active');
|
|
}
|
|
|
|
// Scroll suave al panel
|
|
if (panelActivo) {
|
|
panelActivo.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
}
|
|
}
|
|
|
|
// Event listeners para tabs
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
const planId = tab.dataset.plan;
|
|
activarPlan(planId);
|
|
});
|
|
});
|
|
|
|
// Event listeners para pills
|
|
pills.forEach(pill => {
|
|
pill.addEventListener('click', () => {
|
|
const planId = pill.dataset.plan;
|
|
activarPlan(planId);
|
|
});
|
|
});
|
|
|
|
// Soporte para hash en URL (ej: planes.html#premium)
|
|
const hash = window.location.hash.replace('#', '');
|
|
if (hash && document.getElementById(`panel-${hash}`)) {
|
|
activarPlan(hash);
|
|
}
|
|
}
|
|
|
|
// Inicializar cuando el DOM esté listo
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initPlanesSelector();
|
|
}); |