74 lines
2.3 KiB
JavaScript
74 lines
2.3 KiB
JavaScript
/* ============================================
|
|
SELECTOR DE SERVICIOS
|
|
============================================ */
|
|
function initServiciosSelector() {
|
|
const tabs = document.querySelectorAll('.servicio-tab');
|
|
const pills = document.querySelectorAll('.servicio-pill');
|
|
const panels = document.querySelectorAll('.servicio-panel');
|
|
|
|
if (tabs.length === 0 || panels.length === 0) return;
|
|
|
|
function activarServicio(servicioId) {
|
|
// 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(`.servicio-tab[data-servicio="${servicioId}"]`);
|
|
const pillActivo = document.querySelector(`.servicio-pill[data-servicio="${servicioId}"]`);
|
|
const panelActivo = document.getElementById(`panel-${servicioId}`);
|
|
|
|
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 servicioId = tab.dataset.servicio;
|
|
activarServicio(servicioId);
|
|
});
|
|
});
|
|
|
|
// Event listeners para pills
|
|
pills.forEach(pill => {
|
|
pill.addEventListener('click', () => {
|
|
const servicioId = pill.dataset.servicio;
|
|
activarServicio(servicioId);
|
|
});
|
|
});
|
|
|
|
// Soporte para hash en URL (ej: servicios.html#branding)
|
|
const hash = window.location.hash.replace('#', '');
|
|
if (hash && document.getElementById(`panel-${hash}`)) {
|
|
activarServicio(hash);
|
|
}
|
|
}
|
|
|
|
// Inicializar cuando el DOM esté listo
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initServiciosSelector();
|
|
}); |