Inicio
Comentar
Imágenes
Webgae
Crear un menú en Tabs
HTML
Inicio
Blog
Contacto
Diseñador y desarrollador Web.
Creamos sitios web bonitos y modernos con las mejores herramientas y componentes
Webgae crea cualquier tipo de sitio web.
Creamos sitios web bonitos y modernos con las mejores herramientas y componentes, rápidos, seguros y optimizados para el SEO .
Quienes somos
Somos expertos en la web. Un equipo de diseñadores y desarrolladores, especialistas en marketing y estrategas que identifican problemas y brindan soluciones. Somos desarrolladores de experiencia web que resuelven problemas y hacen crecer negocios.
CSS
.tab-item-box { width: 80%; display: flex; margin: auto; margin-right: 1em; padding: 1em; } .tab-item { text-align: center; border-bottom: 1px solid black; padding: 20px; cursor: pointer; text-align: center; } .tab-content { display: none; width: 80%; margin-top: 20px; text-align: center; padding: 50px 0; margin: auto; } .show { display: block; }
JavaScript
window.addEventListener('DOMContentLoaded', function () { let tabItem = document.querySelectorAll('.tab-item'), tabItemBox = document.querySelector('.tab-item-box'), tabContent = document.querySelectorAll('.tab-content'); // Click on selected tab tabItemBox.addEventListener('click', function (e) { let target = e.target; if (target && target.classList.contains('tab-item')) { for (let i = 0; i < tabItem.length; i++) { if (target == tabItem[i]) { hideTabContent(0); showTabContent(i); break; } } } }); // Hide unactive Tab content function hideTabContent(a) { for (let i = a; i < tabContent.length; i++) { tabContent[i].classList.remove('show'); } } // Show active tab content function showTabContent(b) { tabContent[b].classList.add('show'); } });
Puede cambiar código para ver el resultado
Resultado ↓
No hay comentarios:
Publicar un comentario
Entrada más reciente
Entrada antigua
Inicio
Suscribirse a:
Enviar comentarios (Atom)
No hay comentarios:
Publicar un comentario